I am migrating some GWT content from CellTable to DataGrid, mainly for the DataGrid's feature of locking the header row in place as you scroll.
With CellTable, the column header text would wrap to the next line if the text phrase was too long. The CellTable's header would dynamically grow in height. This was the default behavior, and I never edited any css files.
Can I get this behavior in DataGrid? Do I need a change to my main project css file, or do I make a change to clean.css? Is there a programatic way to set a proprety on DataGrid?
I am creating TextColumn, etc. and adding via dataGrid.addColumn();
Edit: looking at the example here, the header doesn't wrap if you shrink the width of your browser window: http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwDataGrid
Add this to your CSS file:
th {
white-space: normal !important;
}
Related
I have one TextArea in GWT, TextArea inside Scrollable panel is filled with content which comes from API. Sometime the content can be less or more. I want to make my Textarea to shirnk if content is less, so how do I count the total number of lines of text inside text area?
TextArea is with fixed height applied through CSS.
The number of lines will be different depending on the system font, font size selected by a user (it will override the font size you set in CSS), and the browser. Besides, you are talking about a TextArea, so a user can type or paste more text.
The standard design approach is to keep the TextArea size constant.
If you do want to adjust it, the solution is to create a hidden element. See the details:
http://blog.gaijindesign.com/jquery-scrolltop-to-a-hidden-element/
How can I style a dijit.form.Select drop down menu if a use the HTML markup.
<select id="sourceselect" dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>
To make it clear it want to style the drop down menu that is filled with the content. I want to change the height of that menu and have a scroll bar if the height is exceeded.
I am using Dojo version 1.6. Here is a Fiddle example: http://jsfiddle.net/NH7dd/.
Edit: Why the minuses?
The menu that is generated by Dojo is placed in the root of the DOM node. It's a common mistake that the menu is somehow relative positioned towards the textfield, but it isn't.
If you wish to change the style of the menu, then you could use the following CSS selector:
div[dijitpopupparent="sourceselect"] > .dijitMenu {
/** Your CSS */
}
The reason this works is because the menu is wrapped inside a dijit/popup. This popup allows displaying/hiding the menu and as you can see it has an attribute dijitpopupparent which has the original ID of the field.
I also updated your JSFiddle, which now looks like this. But I don't really recommend changing the behavior of the menu like this, since you might mess up the original functionality/behavior of the combobox. I mean, right now I have problems going to certain values because one "scroll tick" already passes a value. With the updated style I can't even properly select "2" anymore.
EDIT: In the updated JSFiddle the scrollbar will always be visible, if you want the scrollbar only to appear when there are more options, then change overflow-y: scroll to overflow-y: auto.
You can set the property for maxHeight.
<select id="sourceselect"
dojoType="dijit.form.Select"
data-dojo-props="maxHeight: 200"
style='width:200px'
onChange="changeDetected();">
</select>
Also, the newer syntax for dojo is "data-dojo-type" instead of "dojoType".
Here is JSFiddle showing the maxHeight property. (I used dojo 1.9, but maxHeight is available in 1.6)
http://jsfiddle.net/NH7dd/17/
I have a html panel and i want to add the html panel to browser screen hence i used rootPanel.get().add(htmlPanel);. But their is a extra space between the starting of the screen and the first widget in html panel (As in image). I tried with setting rootPanel.get().setheight("100%") and rootPanel.get().setsize("100%","100%") but it doesn't seem to work please help i want to remove the extra space and so that the widget starts from beginning.
This padding is added by GWT Bootstrap for its NavBar widget. See the note in the javadoc:
NOTE: We assume that most people will use the ResponsiveNavbar, so, we automatically add a padding-top: 50px in body.If you don't want this, you have to put a padding-top: 0px; manually in your document body tag.
See also https://github.com/gwtbootstrap/gwt-bootstrap/issues/120
I have a problem, and I haven't been able to solve it or find an answer for a few days now.
My theme (BusinessLite) for some reason has set table width in css to 100px!important.
This forces the TinyMCE made Tables to shrink as much as possible, thus making them useless.
TinyMCE by default converts the set width to inline style tag, but it is ignored since !important is present on the theme CSS. I have tried doing it manually, and i can confirm it fixes the issue, but i don't know of a way to make it automatic?
Does anyone know of a way to set TinyMCE to always add !important to the table width?
You could use the content_css setting to load custom css and overwrite theme css.
You would need to issue the !important too to make it work.
I want to have a panel, with two columns.
The first column will contain a list of beans, and the right one a form panel for editing those beans. What I want to do, is that list height is the same as height of the form panel on the right. My list of beans will be larger and larger over time, so it's height will probably exceed form height. When that happens, there should be a scrollbar showed for the list. I also don't want to set explicit size for list and my form panel (it should be flexible because some time I will add or remove some form fields).
I'm basically new to GXT. I'm looking forward for some proposals.
Cheers,
jjczopek
Try setting the CSS style overflow-y: auto; with max-hight on the Panel (div?) on which you need a scroll bar. That should solve your problem.
Try to set Fill or Fit Layout.