I have a problem with the FormLayout and the CheckBox component. I want to use the FormLayout to generate a form for the user. This means I want to have all options in the form (Textinput, Numberinput, Options...) aligned by the Formlayout with the caption to the left and the input to the right.
This works well with other components but not with CheckBox. It always places its caption to the right of the Box, which breaks the visual order of my form.
In Vaadin, the implementation of a component can decide if it renders its caption by itself or if its parent, a component container, renders it. Most of the components let the parent to render the caption. CheckBox is a component that renders its caption by itself.
To fix the problem, you could wrap your CheckBox inside a layout (CssLayout for example) and set the caption for the layout, or you could use this addon: FormCheckBox.
Related
I would like to resize the property window (e.g. when we click on "Table Properties") of TinyMCE 4.x. In the image shown below, the table properties window gets squeezed in terms of width and the labels get overlapped. I looked at the DOM nodes, and most of the widths and heights properties of the container windows, labels and inputs are set dynamically using javascript. Is there a way for us to change the size of these property windows?
Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:
<h3>could not start.</h3>
<hr>
<p>These preferences must all be set before I can start</p>
I have no custom CSS. What appears on the screen is this:
You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.
I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.
I can't be the first person who's tried to put more than a single line into a DialogBox...
What's the trick to making the borders "repeat" and fill in the holes?
Wrap the HTML in HTMLPanel befor passing it to the DialogBox
DialogBox dialog = new DialogBox();
HTMLPanel panel = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
dialog.add(panel);
dialog.center();
Thanks to #Moh for placing me on the right path.
The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.
DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));
Adding buttons is left as an exercise for the reader...
GWT Dialoge box already have pre defined CSS.
you have to override or have to set your own style names using set Methods.
like..
dialogBox.setStyleName("yourcss");
Default css names starts with,
.gwt-DialogBox{}
I'm trying to display a custom component i made inside a panel but when it renders the content is displayed outside of the panel box and there's no scrollbar.
In the designer i have this:
http://i.stack.imgur.com/V99pG.jpg
a panel
an instance of myComponent inside the panel
a button that calls a method on myComponent that adds some controls into it
When i run the application and press the button the following is displayed:
http://i.stack.imgur.com/wlDnV.jpg
See that the controls added dynamically in myComponent get over the panel's bottom line instead of showing only the visible part of the component and a scrollbar.
Any ideas how to fix it?
Thanks!
You should fix your component custom component height according to your panel if you are using text area in your component for displaying text then you should the text area size
I had your problem exactly gigkent. Turns out that it's to do with height settings. Apparently, setting the height to 100% is what messes it up.
I had an Accordion, a (several) NavigatorContent inside the accordion, a panel inside the navigator content, a scroller inside the panel with the scroller's viewport set to a VGroup declared outside all of that. The VGroup had clipAndEnableScrolling set to true.
Inside the VGroup, I had a form where I was dynamically adding radio buttons and my radio buttons were going off the screen. Setting the height of the VGroup to the height of the navigator content fixed the problem for me. I then had to set the width of the VGroup to the width of the Navigator Content -17 to compensate for the width of the scrollbar itself.
Here's the link that led me in the right direction.
http://www.actionscript.org/forums/showthread.php3?mode=hybrid&t=191108
I've been using Qt for some times, but I'm quite new to layouts. I would like to create a dialog with a QTextEdit inside, and the QTextEdit would resize to fill the whole dialog. How can I use layouts to do that? Or is there some other technique that I'm missing?
I have tried adding a layout to the dialog, then put the QTextEdit inside. However, I cannot find any property to make the layout fit the whole dialog.
After adding the text edit to your form, right click on the form and you will see a "Lay out" menu item at the bottom of the context menu, select that and then the layout type you want to use. The designer will create a top level layout of that type for your form and the text edit should now expand to fill the form.
I want to build a flex FormItem extension that adds a button into the item label section, such that there is both a text label and, to the right of it, a button that uses an image icon:
A form item http://img830.imageshack.us/img830/4411/screenshot20100730at331.png
Basically, I want to create that 'i' icon, such that I can click on it to display a help overlay for the item in question.
Is there an existing component that does this? If not, how do I do it?
Try to use grid, gridrow, and grititem, like the html table. and add the label and the "i" image into a horizontal layout container inside the griditem.
See
http://kennethsutherland.com/2009/05/27/formitem-adding-an-icon/