I get different results for same column (static text) depending on having long or short text, why?
Correct layout (shorter description)
Incorrect layout (Long description in static column)
Firstly, try to set this css for .yourclass text
.yourclass p {
width: min-content;
min-width: 100%;
}
This will force your text to be at minimum content width inside .yourclass container. But at the same time will make sure that it will take all 100% of the parents width, without stretching or shrinking it.
Related
The data I want to display in ag-grid is predominantly blocks of text. I would like the text to wrap and the cell height to auto.
wrapText: true,
autoHeight: true
However, when the text wraps, it maintains a line-height of 40px, which is not attractive. I also notice it doesn't try to wrap on word.
I tried resetting the line-height, but then I lose any top or bottom padding. When I add the padding, the top padding is fine, but the bottom padding is hidden - the row height does not account for the padding.
How do I get an attractive block text display in a cell with decent padding of the cell contents?
You could add some CSS to directly target the cell content to add padding:
.ag-theme-alpine .ag-cell-value {
line-height: 20px !important;
word-break: normal; /* prevent words from breaking */
padding-top: 5px; /* space top */
padding-bottom: 5px; /* space bottom */
}
See this implemented in the following plunkr
How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example.
In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see BasicTable.js):
const styles = theme => ({
paper: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
});
The paper class is applied to the root element:
function BasicTable(props) {
const classes = props.classes;
return (
<Paper className={classes.paper}>
<Table>
...
If you want a vertical scroll, you'll need to specify a height and include considerations for overflow-y. If you want both horizontal and vertical scrolling, you can set overflow and both axes will be configured:
const styles = theme => ({
paper: {
height: 300,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflow: 'auto',
},
});
Note: This will not fix your column headings, because it is applied to the container. This adjustment will apply scrollbars to the entire table - heading, body, footer, etc.
In order to have the table header fixed and scroll just the table body I've come up with this solution.
First I added to each of the table components the component="div" property in order to get rid of the table skeleton completely.
Then I've added to Table, TableHead, TableBody and TableCell the display: block rule to override the material rules.
TableRows will get display: flex.
TableBody will get the desired fixed (max-)height, plus overflow: auto.
Of course by using divs instead of table tags the header and body cells lose the table alignment. In my case I solved this by setting to the first cells a fixed width, same for the first cells in the header and the first cells in body (or you can go for percentages as well) plus a flex-shrink: 0.
The second cells got flex-grow: 1
Note: Material UI v1 used
Use the "stickyHeader" property on table such as <Table stickyHeader>...</Table>
I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.
According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to
"[...] automatically fills the height of the surrounding container.
The visibleRowCount property is automatically changed accordingly. All
rows need the same height, otherwise the auto mode doesn't always work
as expected."
I have used the following code:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(
Anyone has a solution?
Thanks in advance!
=====================
EDIT: Thanks to #matz3's answer below, I was ultimately able to solve this issue.
Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...
However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit
Matz3, thanks for your help!
CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length
For example, if you have model with this data:
[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]
You can bind to Array property length like this:
var oTable = new sap.ui.table.Table({
visibleRowCount : '{/length}'
})
[...] automatically fills the height of the surrounding container [...]
Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)
this.setHeight("100%");
And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)
<div id="uiArea" style="height:500px"></div>
With these changes it now works as expected
I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...
_resizeTableRow: function () {
var oTable = this.getView().byId("referenceTabId");
var sTop = $('#' + oTable.getId()).offset().top;
var sHeight = $(document).height();
//if there a row, you can take the row Height
//var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();
var iRowHeight = 40;
var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);
oTable.setVisibleRowCount(iRows);
},
Other option is to put the Table in sap.ui.layout.Splitter:
In GWT, how do you set the position of an Image object after it was added to a Panel? There does not seem to be a method to set the Image top and left positions. Do we have to remove the image from the Panel and add it again using the desired left and top values? What is the best approach?
If you set absolute positions, you can
int top = myPanel.getAbsoluteTop();
int left = myPanel.getAbsoluteLeft();
myImage.getElement().getStyle().setTop(top + 100, Unit.PX);
myImage.getElement().getStyle().setLeft(left + 100, Unit.PX);
Alternatively, you can set "position: relative" style on your image. Then you can set "top" and "left" on an image, and it would position itself relative to its parent element.
From the way your questions is asked, I assume that you are trying to use GWT as you would use Swing or SWT from Java. This is not the way GWT is ment to used and leads to very bad code and very bad projects most of the time.
GWT is not about hiding the browser. So if you want to change the postion of an element you would do that mostly with CSS.
Simply add two css classes to your project
.before{
position: relative;
top: 0px;
left: 0px;
}
.after{
position: relative;
top: 100px;
left: 100px;
}
at first give your image the first class:
image.addStyleName("before");
and later:
image.addStyleName("after");
If you really need to make this dynamically (some calculated size) you can just set the style property of the element:
image.getElement().getStyle().setLeft(value, Unit.PX);
image.getElement().getStyle().setTop(value, Unit.PX);
What I did was simply:
absolutePanel.setWidgetPosition(myImage, newXvalue, newYvalue);
Assuming that 'myImage' was a child of absolutePanel.
I am using GWT2.3 in my project.
I want to increase editableTextBox width when user click on editableTextCell.
Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.
I added EditTextCell in Celltable's column
Column stringColumn = new Column(new EditTextCell()) {
// My Code
}
cellTable.addColumn(stringColumn, "MyColumn");
cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);
I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses
#Override
public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
String type = event.getType();
int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();
if(elem.getInnerHTML().startsWith("<INPUT")){
String test = elem.getInnerHTML();
// test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>
test= test.replace("value", " size="+editedTexBoxSize+" value");
// test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>
elem.setInnerHTML(test);
}
super.onBrowserEvent(context, elem, object, event);
}
I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.
Any Solution ?
In my project I do that:
cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);
.edit-cell input {
width: 290px;
}
Finally the answer !
I tried this even simplier using UIBinder by adding :
.edit-cell input {
width: 30px;
text-align: right;
}
Then for the cell table I added
<c:CellTable
addStyleNames='{style.edit-cell}'
ui:field='itemTable' />
Wonderful !
You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.
Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.
Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.