I've created a CellTable and works correctly but when I try to insert a new row with no element or white spaces looks like this.
Thanks in advance.
If you just insert empty rows, height will be smaller than other rows. Use CSSResource and style the tr with proper height.
When you insert an empty row, try inserting an HTML space inside it to initialize the height. Like
Yes, thanks Abhijith Nagaraja. This is how my css looks now.
.cellTable tbody td{
height: 13px;
}
Thanks a lot.
Related
I am using bootstrap in an Ruby on Rails app. I use Firefox. I find that the height of the dropdown field (select tag) is too small.However the height of the text fields are appropriate. I had too add the below code to application.css to fix it:
select {
height: 38px !important;
}
Now dropdown shows its content properly though its overall height (box) is a bit bigger that text fields. Is there a neater way to fix the issue?
I found it more appropriate to remove styling from application.scss and modify the app/assets/stylesheets/custom.css.scss instead. custom.css.scss is generated by Bootstrap. The padding for all FORM elements was set to 10px in that file. I set padding for SELECT element to 2px and left the rest intact.
Please check image for reference. My requirement is to limit this text in the cell so that it does not remove partition line of next cell even when text is long.
I am using rich text editor in gwt 2.1.
I dont want one cell data to overflow into other cell destroying its boundaries
Any suggestions
Thanks
You can apply a CSS style to your table. For example:
.myTable td {
word-wrap: break-word;
white-space: normal;
}
It can be done using:
label.setOverflow(Overflow.HIDDEN);
HIDDEN
public static final Overflow HIDDEN
Content that extends beyond the widget's width or height is clipped (hidden).
Have you ever tried to use this?
pricate ListGrid grid;
grid.setFixedRecordHeights(false); // Will make sure that your rows can be resized.
grid.setWrapCells(true); // Will make the text at the end of your rows wrap to the next line
Trying to use the following code to set the table height of a Horizontal panel. Is there any thing wrong with the below code. When i run it in fire bug mode of fire fox came to know that the height is applying to 'TD' element of HTML, but not to 'TABLE' element of HTML.
setCellHeight(resetButton, "400")
I think the setCellHeight() method applies to cell inside a table a not the table, so it is normal that the height is applying to the 'TD' element and not the 'TABLE' element of HTML.
What you can do to set the height of the table is use the addStyleName() method to set the height with the css.
In the java code :
table.addStyleName("table");
In the css:
.table{
height: 400px;
/*other wished styling*/
}
I belive you may be looking for setHeight()
horizontalPanel.setHeight("400px")
I am using a Gwt DataGrid with multiple Columns. The default behavior of the columns is to wordwrap. I would like for one of the columns to not wordwrap and just cut off. Is this possible?
For example, currently this is displayed:
I am making a
sandwich
I would like it to display:
I am making a
In addition to overflow:hidden you may need white-space:nowrap and finally add a text-overflow: ellipsis so there is an indicator to the user that the incomplete text is being shown.
You can set overflow: hidden in the style of each Column.
You can use DataGrid.addColumnStyleName to set styles on individual columns, or just addStyleName to add a style to the whole widget.
I have a problem with DataGrid in gwt 2.4. I made table with CellTable, and everything worked fine. But I needed fixed header, and then just replaced CellTable with DataGrid. I had problem with .css file, but than has been resolved.
Now, the problem is that every column have fixed width, and table put every row just in visible part of screen.
This is new and old screen shots, to make things more clear :)
http://img832.imageshack.us/img832/5026/oldscreenshot.jpg
http://img834.imageshack.us/img834/1489/newscreenshot.jpg
Can someone help to make old looking, but with fixed header.
You can set a fixed width for each column of the data grid:
dataGrid.setColumnWidth(sampleColumn, 40, Unit.PX);
and expand the total data grid width:
dataGrid.setWidth("100%"); // choose the most useful in your app
dataGrid.setWidth("1400px");
I'm not sure what the right answer is, but I don't think the previous responders understood the question.
Basically, you want dataGrid to use "table-layout: auto" instead of "fixed". This is what cellTable does. Table columns are auto-sized based on content.
This is easy for the content table, but to get the header-freeze, dataGrid is using a separate div/table for the header. Therefore, the header table's columns need to be explicitly sized based on the data table. They also need to be resized anytime the table changes (browser resizes, etc.). I plan on adding resizeable cols on a dataGrid, so I'll be hitting this same challenge soon I expect and will update when I have something more explicit if anyone is still tracking this thread...
need to wrap your content in your td with an inner div. and make sure the overflow-x is set to hidden.
table {
overflow: hidden;
white-space: nowrap;
table-layout: fixed;
}
td div{
overflow-x:hidden;
}