I use antd table in my project and often use a horizontal scroll when there are many columns in a table that cannot be displayed in a single frame. The width for each column is defined. It was working fine in previous days but now i am having a problem with column width. The column width is not working properly if i don't apply ellipsis to each column. Is there any way to fix it rather than using ellipsis separately for each column?
const tableColumns = () => {
return [
{
title: 'col one',
dataIndex: 'throws',
key: 'throws',
width:110,
ellipsis: true,
sorter: (a, b) => stringValueSort(a.throws, b.throws),
},
{
title: 'col two',
dataIndex: 'bats',
key: 'bats',
width:90,
ellipsis: true,
sorter: (a, b) => stringValueSort(a.bats, b.bats),
},
]
};
If i use ellipsis: true property columns width automatically adjust according to the text content in column. Width of the column still not been applied using this width property.
.antd-table-custom-class thead th, .antd-table-custom-class tbody td {
white-space:pre-wrap;
text-overflow: ellipsis
}
if you want to see whole text please
.antd-table-custom-class thead th, .antd-table-custom-class tbody
td
{ white-space: nowrap;
word-break:break-word;
word-break: break-all
}
if antd table width 100% not working:
.ant-table-fixed {
table-layout: fixed;
}
.ant-table-tbody > tr > td {
word-wrap: break-word;
word-break: break-all;
}
Related
I am using the GeoChart of angular-google-charts. This is my code:
type="GeoChart";
columnNames = [
[{type: 'string', role: 'data'}]
]
data = [
['India'],
['Australia'],
['Germany'],
['United States'],
['Brazil'],
['Canada'],
['France'],
['Russia']
];
options = {
backgroundColor: '#17263c',
datalessRegionColor: '#242f3e',
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
color: 'black'
}
},
colors: ['#46127A', '#1102BB', '#1633C4', '#3185CE']
};
dynamicResize = true;
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
[dynamicResize]="dynamicResize"
style="width: 100%; height: 100%;">
</google-chart>
As you can see there is the array data (which will be saved in a database lateron)
What I now want to do is to change the color of a country on click. There are two things I don't know:
How do I know where I click on the map? If I click on Germany for example how does my program know that it should run pushCountry("Germany") for example and if I click on France pushCountry("France")
How do I really push the countrys so that they are displaxed immediately? For testing I created a button calling the function this.data.push(['Germany']) and logged the array, Germany was added but the color in my chart did not change.
Thank you for your help!
I have an Openlayers map with a lot of overlays (Point-coordinates).
These overlays are often very close to each other or overlapping.
When I click on an existing Overlay I want the Overlay to be set on top, so that it is fully seen, not behind any other Overlay.
So far I have only seen that the Layers can be set with an z-index. Is it possible to do that with overlays, too?
I would like to do something like that:
map.setLayerIndex(markers, 99);
but with an overlay
Overlays are controls, which are positioned on an coordinate instead of being in a fixed place. They are basically nothing more but regular html div elements and change position with the map.
This also means, you can apply normal CSS styling and use z-index on them.
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// Vienna marker
var marker1 = new ol.Overlay({
position: ol.proj.fromLonLat([16.3725, 48.208889]),
positioning: 'center-center',
element: document.getElementById('marker1'),
stopEvent: false,
className: 'm1 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker1);
marker2 = new ol.Overlay({
position: ol.proj.fromLonLat([23.3725, 48.208889]),
positioning: 'center-center',
element: document.getElementById('marker2'),
stopEvent: false,
className: 'm2 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker2);
function clicked(selector) {
console.log('clicked overlay', selector);
document.querySelectorAll(".ol").forEach(function(el){
el.classList.remove('active');
});
document.querySelector(selector).classList.add('active');
}
html, body, .map {
min-height: 50px;
min-width: 50px;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.marker {
width: 30px;
height: 30px;
border: 1px solid #088;
border-radius: 15px;
background-color: #0FF;
}
.m1 .marker {
background-color: #FF0;
}
.active {
z-index: 1234782904789;
}
.active .marker {
background-color: red;
}
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.0.0/legacy/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.0.0/legacy/ol.js"></script>
<div id="map" class="map"></div>
<div id="marker1" title="Marker" class="marker" onclick="clicked('.m1')"></div>
<div id="marker2" title="Marker" class="marker" onclick="clicked('.m2')"></div>
The existing answer works, but it doesn't preserve the z-order of the overlays, it only guarantees that the clicked one will be on top. Since it is the only element with a z-index in this stacking context, the z-order of the other elements will be random.
Here is a solution that brings the clicked overlay to the front, while preserving the current z-order of all the other ones:
export function bringToFront (map: PluggableMap, clickedOverlayElement: HTMLElement) {
const overlays = map.getOverlays().sort(zIndexComparator);
overlays.forEach((overlay, i) => {
const element = overlay.get('element');
const container = pointInfo.closest('.ol-overlay-container') as HTMLElement;
container.style.zIndex = element === clickedOverlayElement ? overlays.length.toFixed() : i.toFixed();
});
}
function getOverlayContainer (overlay: Overlay) {
return overlay.get('element').closest('.ol-overlay-container') as HTMLElement;
}
function zIndexComparator (a: Overlay, b: Overlay) {
return (getOverlayContainer(a).style.zIndex > getOverlayContainer(b).style.zIndex)
? 1
: -1;
}
Just call the bringToFront() function when your overlay element is clicked.
I have a problem in Rappid/jointJS
I have in stencil.js 4 shapes(2 basic.Circle and 2 basic.Rect) with names START(basic.Circle), END(basic.Circle), Activity(basic.Rect) and Workitem( basic.Rect) and I want in my main.js from all my graph to get the basic shape with name(I mean with attrs text ) "Activity".
This is the Stencil description for "Activity" :
new joint.shapes.basic.Rect({ size: { width: 5, height: 3 },
attrs: {
rect: {
rx: 2, ry: 2, width: 50, height: 30,
fill: '#0000FF'
},
text: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
}
}),
How wil I get it? The only way I can search in my graph so far is if a cell has type basic.Circle(use of get('type') === 'basic.Circle')). but with type Circle I have two items:Activity and Workitem.
Is it so difficult to search for the graph element with name : "Activity"?
Thank you in advance
You can obtain all the elements (except for links) from following method
var allElement = graph.getElements()
Next if you want to obtain elements with 'Activity' do as follows
var activityElements = [];
allElement.forEach(elem => {
var textVal = elem.attributes.attrs.text.text;
if(textVal !== undefined && textVal === 'Activity') {
activityElements.push(elem);
}
});
Now the activityElements array will contain all the elements you require.
I solved my problem by taking element data in JSON format:
_.each(this.graph.getElements(), function(element) {
if(element.attributes.attrs["text"]["text"] == "Activity"){
//alert("YEAHHHHHH");
}
});
you could use the api on element as well, element.attr('text') returns the text object from the shape: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
You could also set an "id" attribute to your shape and use graph.getCell('id_name_goes_here'); which would be much simpler if you didn't mind adding an id field to each shape.
I'm using react-bootstrap-table to display my data in table format. This is an excerpt from my current code:
var table = (
<BootstrapTable ref="table" data={convertedData} deleteRow={false} striped={true} search={false} pagination={true} hover={true} selectRow={selectRowProp}>
<TableHeaderColumn columnClassName="col-md-1" dataField="field1" isKey={true}>field1</TableHeaderColumn>
<TableHeaderColumn columnClassName="col-md-2" dataField="field2" >field2</TableHeaderColumn>
<TableHeaderColumn columnClassName="col-md-2" dataField="field3">field3</TableHeaderColumn>
</BootstrapTable>
);
}
return (
<div>
<h2>{this.props.title}</h2>
{table}
</div>
)
},
From my css file:
.table td.col-md-7 {
word-wrap: normal;
overflow: auto;
text-overflow: clip;
}
The issue I'm facing is that cells with a lot of text, gets a scrollbar when what I actually want is to display the text in multiple rows within the cell.
Any ideas on how to get this working?
Found an approach that seems ok:
function multilineCell(cell, row) {
return "<textarea class='form-control cell' rows='3'>" + cell +"</textarea>";
}
[...]
<TableHeaderColumn columnClassName="col-md-4" dataFormat={multilineCell} dataField="summary">Summary</TableHeaderColumn>
I want to change a color of grid line but without selecting it. It means I cannot use onStyleRow event as it reacts only for 'selected', 'odd' or 'over' event.
Any ideas?
thx
I found an updateRowStyles(idxRow) function, but no idea how to use it (how to pass syles etc.) and not sure if it will solve my problem
You cant change your style this way:
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', styles: "color:red;" },
{ field: 'valoare', name: 'Valoare', width: '252px', styles: "color:red;"}];
or use formatter in layout grid
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
} },
{ field: 'valoare', name: 'Valoare', width: '252px',
formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
}}];