TextBox width percentage in Standards Mode

Craig Mitchell

unread,

Jan 31, 2011, 10:55:30 PM1/31/11

to Google Web Toolkit

Hi,

If I set a TextBox width percentage (say 100%) in standards mode (Ie:
<!doctype html>), the total width will be larger then 100% due to the
TextBox's padding, and border.

I can get the width back to 100% by removing them with css like this:
.noPadding {
padding: 0px;
margin: 0px;
border: 0px;
background-color: #eeeeee;
}

However, I want the padding and border around the TextBox.

How can I set a percentage width on a TextBox, and get it to actually
go to that width?

The reason I would like to do this, is so it works like ListBox, which
doesn't seem to have any padding or border.

Thanks.

Craig Mitchell

unread,

Jan 31, 2011, 11:57:27 PM1/31/11

to Google Web Toolkit

If anyone is interested, I have a "hack" fix, which is to encase each
TextBox in a div which has padding on the right to cater for the
TextBox's padding and border.

Eg:

<ui:style>
.textBoxPadding {
padding-right: 8px;
}
</ui:style>

<div class="{style.textBoxPadding}">
<g:TextBox ui:field="firstNameTextBox" width="100%" />
</div>

If anyone has a better fix, please let me know.

Cheers.

Jeff Schwartz

unread,

Feb 1, 2011, 5:42:35 AM2/1/11

to google-we...@googlegroups.com

100% of what? Your problem has nothing to do with doctypes. If there is no immediate parent with a specific width set then there is nothing to constrain the width of the text box.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Jeff Schwartz

Craig Mitchell

unread,

Feb 1, 2011, 6:14:00 PM2/1/11

to Google Web Toolkit

Sorry, I should have been more clear. 100% of its parent. In my
case, a table. Eg:

<table>
<tr>
<td>
Title
</td>
<td>
<g:ListBox ui:field="titleListBox" width="100%"/>
</td>
</tr>
<tr>
<td>
First name
</td>
<td class="{res.css.textBoxPadding}">

<g:TextBox ui:field="firstNameTextBox" width="100%" />

</td>
</tr>
</table>

Without the res.css.textBoxPadding (which puts padding-right:8px;),
the firstNameTextBox will be 8px wider then the titleListBox.

Cheers.

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> --

> *Jeff Schwartz*

Craig Mitchell

unread,

May 21, 2011, 2:03:10 AM5/21/11

to google-we...@googlegroups.com

Putting in a 8px right padding for every TextBox is getting annoying. Has anyone got a better fix for this?

<tr>

<td>

Title

</td>

<td>

<g:ListBox ui:field="titleListBox" width="100%" />

</td>

</tr>

<tr>

<td>

Name

</td>

<g:TextBox ui:field="nameTextBox" width="100%" />

</td>

</tr>

</table>

Jeffrey Chimene

unread,

May 21, 2011, 12:42:01 PM5/21/11

to google-we...@googlegroups.com

It sounds like this is a common pattern for you. Create a @UiConstructor annotated ctor that generates the table, and manages the instance-specific values of the instantiated controls. You'll have to track instances of this widget to references to each instantiated control. You'll also need to declare the namespace in the ui.xml file.

See http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_a_widget

I had a similar use case. I created a custom widget that instantiated the control pair, and handled the READ case (load a new form using existing data) by setting the associated ListBox selected value to match the current TextBox value.

If I was starting from scratch, I'd probably use Cell widgets.
See http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html

Reply all

Reply to author

Forward