Dear Chi H,
It is amazing. I am really thankful to you for the response. You are dead
right. My earlier project was in Standard Mode and the new one is in Quirks
mode.
The earlier html had following line:
<!doctype html>
And the new project has:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Thank you for solving the puzzle.
Sagar
--------------------------------------------------
From: "Chi H" <[email protected]>
Sent: Monday, April 12, 2010 11:49 AM
To: "Google Web Toolkit" <[email protected]>
Subject: Re: Texbox width greater than others
I've run into this problem before, it is a 'quirk' of the CSS
standards mode. Take a look at the following HTML:
<!DOCTYPE html>
<html>
<body>
<input type='text' style='width: 300px;'><br>
<select style='width: 300px;'></select><br>
<button style='width: 300px;'> </button><br>
<div style='width: 300px; background-color: red;'> </div>
<input type='text' style='width: 300px; box-sizing: border-box; -moz-
box-sizing: border-box; -ms-box-sizing: border-box;-webkit-box-sizing:
border-box;'>
</body>
</html>
In standards mode, the text box is wider than the other widgets. If
you try quirks mode (by removing the first doctype line), all widgets
are the same width. I bet the new project you tried is in quirks
mode, which would explain why you get identical widths.
In standards mode, the text box defaults to using the content box
model, so when you specify the width of the textbox, you are actually
specifying the width of the inner area, not including the padding or
border. If you force the text box to use the border box model (which
is what I did in the last row of that sample HTML), you'll see that
all the widgets line up again. Unfortunately, the box-sizing
parameter is not available in IE6 and IE7.
Other than reverting to quirks mode, the only solution i found was to
use deferred binding to create an alternative setWidth function which
will
1) In IE6/7, set the Width to width-4
void setWidth(TextBox textBox, int width) {
textBox.setWidth((width-4)+"px"); //4 being the default padding/
border widths of a textbox, you may need to change it if you overrode
it in your stylesheet
}
2) In all other browsers, set the width to the requested width, and
apply the border box model
void setWidth(TextBox textBox, int widtb) {
textBox.addStyleName("borderBoxModel"); //this is the name of a css
class which sets the box-model properties
textBox.setWidth(width+"px");
}
On Apr 11, 11:59 pm, "Sagar Samag" <[email protected]> wrote:
Thank you, Kozura,
My problem got resolved. I copied the code to a new GWT Project and it is
working fine there without any change! But in the old project the same
strange behavior continues. I checked CSS files. They are identical. I
could
not understand why this was happening.
Sagar
--------------------------------------------------
From: "kozura" <[email protected]>
Sent: Monday, April 12, 2010 10:37 AM
To: "Google Web Toolkit" <[email protected]>
Subject: Re: Texbox width greater than others
> Probably need to do panel.setCellWidth(text, "200px") since
> VerticalPanel is doing implemented with a table. If lined up
> formatting is key you might find other panel widgets like Grid to be
> easier.
> On Apr 11, 10:23 pm, "Sagar Samag" <[email protected]> wrote:
>> Am I missing something? I have very simple code to display a TextBox,
>> a
>> Dropdown and a Button. Why is the width of the Textbox greater than
>> others? I checked in IE6, IE8 and Mozilla.
>> TextBox text = new TextBox();
>> ListBox list = new ListBox();
>> Button button = new Button("Click me!");
>> text.setWidth("200px");
>> list.setWidth("200px");
>> button.setWidth("200px");
>> VerticalPanel panel = new VerticalPanel();
>> panel.add(text);
>> panel.add(list);
>> panel.add(button);
>> RootPanel.get().add(panel);
>> I am in the middle of code that needs abstraction over the widget. I
>> need
>> to display different widgets without knowing what they are. Different
>> widths of controls are screwing my plans.
>> Can someone help me on this?
>> Thanks and Regards
>> Sagar Samag
> --
> You received this message because you are subscribed to the Google
> Groups
> "Google Web Toolkit" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
>http://groups.google.com/group/google-web-toolkit?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
--
You received this message because you are subscribed to the Google Groups "Google
Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
