Textbox Does Not Display Correctly When Using Chrome

[KGD]

In the app that I've built, I've noticed that items such as TextBoxes, ComboBoxes and the like do not display the same in Chrome as in IE and Safari.  Specifically, a textbox positioned on a panel displays correctly (i.e. maintains its position based on the development and allows the user to input text and see the text that has been typed in).  However, in Chrome, the textbox is not positioned as when created in development, the actual text is barely visible.  In order to get a textbox on a panel that displays the typed text correctly in all three browsers, I have to grossly oversize the textbox so that Chrome displays it correctly but then the overall aesthetic of the app looks terrible.  What does Chrome not respect/honor a widget's properties?  Am I missing some type of setting?  Surely, it's not expected that we check the browser type and if its Chrome we have to programmatically change the widget's properties because of Chrome's display issues.  Any help would be appreciated.

Thanks,

KGD

[Jim Douglas]

The GWT TextBox isn't much more than a very thin veneer around an HTML <input type="text"> element.  It's one of the most commonly used GWT Widgets; you should start with the assumption that it works fine in all standard browsers.

You can open this page in Chrome to see a sample GWT TextBox:

http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwBasicText

You didn't post any code, and your description is a bit vague, so what exactly does your code look like and what are you seeing?  And what is it about your code that gives you different behaviour for your TextBox Widgets in Chrome versus some other browser?  Chrome and Safari shared the same underlying rendering engine until recently, and Blink hasn't diverged significantly from WebKit, I'd be very surprised if you see different behaviour between Chrome and Safari.

[Wayne Rasmuss]

If you're using css to layout these boxes there are some differences between chrome and pretty much every other browser in how it handles sizing text boxes and did other input controls. I don't recall exactly what the issue was, but I know I fixed it by using calc in css to make chrome do the right think.

Basically, I added two width properties the the corresponding css class. One set the way that worked on other browsers and one using calc after. The browsers that support calc fall back on it, the nurses that don't use the first settings.

[Wayne Rasmuss]

Below is a CSS example that does what I was talking about. This css is used as a css resource in GWT so I had to wrap the calc in a literal. The left and right properties used by some browsers and the width with the calc is used in others.

.form-input-line-cell {

    /*

        !!! This class has two ways of specifying the width. One way works on chrome and client and the other firefox

        and IE. Fortunately, the both work together

    */

    position: absolute;

    left: 8px;

    right: 8px;

    top:3px;

    bottom: 3px;

    font-size: 32px;

    text-indent: 8px;

    border: solid #d3d3d3 1px;

    border-radius: 3px;

    color: black;

    width: literal("calc(100% - 16px)");

[KGD]

Thank you for your response.  Unfortunately, I've had to focus on other issues and am now coming back to this issue.

Specifically, the layout, placement, sizing and alignment do not seem to be honored by the various browsers.  The two "sets" of screen shots give you an idea what I'm seeing.  Basically, when a component such as a textfield or button is added to a panel and sized in Eclipse IDE, it will appear appropriate and testing and tweaking on Safari will eventually get the layout correct.  But, viewing the component in Chrome or IE, and the layout is skewed.

Creation of the buttons is straightforward:

                Button btnNewClient = new Button("New Client . . . ");

mainPanel.add(btnNewClient, 652, 16);

btnNewClient.setSize("114px", "24px");

Button btnNewContract = new Button("New Contract . . .");

mainPanel.add(btnNewContract, 775, 16);

btnNewContract.setSize("114px", "24px");

This is a simple example of the rendering differences.  I don't have images from IE but the buttons, for example as in the attached images, are extremely skewed (overlapping and extending way beyond their original bounds set in the code.

Obviously, this has to be something I'm overlooking or misunderstanding about GWT and any additional insight would be appreciated.

Thanks,

KGD

[Jens]

Check your CSS. Maybe you have conditional CSS rules that screw things up. If you are sure it is correct then check your browser settings. Every browser allows the user to configure font settings for web pages. In Chrome for example you can go to settings -> advanced settings -> web content -> font size.

To see if its a browser thing you could create a new empty GWT project, select a theme and place a button in the RootPanel. If this works as expected it is most likely a CSS issue in your app.

-- J.

[Andrei]

Your problems are not related to GWT. It may be something very basic, like a font or a font size not being set in your CSS, or a font not being available in one of the browsers.

Check which CSS styles are applied to your elements in each browser.