GWT/CSS text align problem

[Magnus]

Hello,

assume a rectangular region at the bottom of the browsers content, used as a statusbar.

There should be three containers for text:

- left edge, vertically centered, defined left padding
- right edge, vertically centered, defined right padding
- center, vertically centered

+-----------------------------------------------------+
| left                 center                   right |
+-----------------------------------------------------+ 

I used to realize this with a lot of panels and onResize events, until I learned in this group that I should better do it with CSS.

Then, I found a solution using CSS, which worked for me:

<div style="display:table; width:100%;height:100%;">
 <div style="display:table-cell; vertical-align:middle;zoom:1; /* for IE8 */">
  <div style="float:left; padding-left:1em;">
   <div class="gwt-HTML">LEFT</div>
  </div>
 <div style="float:right; padding-right:1em; text-align:right;">
<div class="gwt-HTML">RIGHT</div>
</div>
<div style="text-align:center;"><div class="gwt-HTML">CENTER</div>

</div></div></div> 

I create this code with a class "Bar" as shown below.

However, I found that it does not work in IE8: The text "RIGHT" is not at the right edge of the bar, but below the word "LEFT".

I asked in a CSS group, but they always grumble because my site is "full of javascript" (which comes from GWT). :-)

So I hope that someone in the GWT group can help me.

Thanks

Magnus

-----

public class Bar extends SimplePanel //HTMLPanel

{

 private SimplePanel pnl_lf = null;

 private SimplePanel pnl_rt = null;

 private SimplePanel pnl_ct = null;

 

 public Bar ()

 {

  super ();

  init ();

 }

 

 private void init ()

 {

  final String stl_outer = "display:table; width:100%;height:100%; "; // border:1px solid;

  final String stl_inner = "display:table-cell; vertical-align:middle;zoom:1; /* for IE8 */";

  final String stl_lf = "float:left; padding-left:1em;";

  final String stl_rt = "float:right; padding-right:1em;"; // text-align:right;";

  final String stl_ct = "text-align:center;";

  

  pnl_lf = createDiv (stl_lf);

  pnl_rt = createDiv (stl_rt);

  pnl_ct = createDiv (stl_ct);

  FlowPanel inner = new FlowPanel ();

  setStyle (inner,stl_inner);

  inner.add(pnl_lf);

  inner.add(pnl_rt);

  inner.add(pnl_ct);

  

  SimplePanel outer = new SimplePanel ();

  setStyle (outer,stl_outer);

  outer.add(inner);

  

  add(outer);

  

  addStyleName ("apl-StatusBar");

 }

 public void setLeft (Widget wgt)

 {

  pnl_lf.add (wgt);

 }

 

 public void setRight (Widget wgt)

 {

  pnl_rt.add (wgt);

 }

 

 public void setCenter (Widget wgt)

 {

  pnl_ct.add (wgt);

 }

 

 private SimplePanel createDiv (String style)

 {

  SimplePanel p = new SimplePanel ();

  setStyle (p,style);

  return (p);

 }

 

 private void setStyle (Widget wgt,String style)

 {

  Element e = wgt.getElement();

  e.setAttribute("style",style);

 }

 

}

[Thomas Broyer]

On Tuesday, December 18, 2012 8:43:54 AM UTC+1, Magnus wrote:

Hello,

assume a rectangular region at the bottom of the browsers content, used as a statusbar.

There should be three containers for text:

- left edge, vertically centered, defined left padding
- right edge, vertically centered, defined right padding
- center, vertically centered

+-----------------------------------------------------+
| left                 center                   right |
+-----------------------------------------------------+ 

I used to realize this with a lot of panels and onResize events, until I learned in this group that I should better do it with CSS.

Then, I found a solution using CSS, which worked for me:

<div style="display:table; width:100%;height:100%;">
 <div style="display:table-cell; vertical-align:middle;zoom:1; /* for IE8 */">
  <div style="float:left; padding-left:1em;">
   <div class="gwt-HTML">LEFT</div>
  </div>
 <div style="float:right; padding-right:1em; text-align:right;">
<div class="gwt-HTML">RIGHT</div>
</div>
<div style="text-align:center;"><div class="gwt-HTML">CENTER</div>

</div></div></div> 

I create this code with a class "Bar" as shown below.

However, I found that it does not work in IE8: The text "RIGHT" is not at the right edge of the bar, but below the word "LEFT".

Haven't looked in details but if you use display:table why are you using floats? why not use display:table-cell to split your row into 3 cells?

[Magnus]

Hi Thomas,

I assume you mean something like this:

http://jsfiddle.net/3EJ7A/19/

In this case the cells all are aligned to the left.

How can we position them left, right and centered?

Magnus

[Andrea Boscolo]

There is a typo in the table-row div (missing display). Then use text-align if you want to align just the text.
See http://jsfiddle.net/a4RmK/
I'd rather try a cleaner solution though, like http://jsfiddle.net/nnpGb/

[Magnus]

Hi Andrea,

I would also prefer a cleaner solution, and I explicitely tried your approach (using the code below). But it also gets misaligned in IE8:

http://www.bavaria64.de:8080/bcst/index.html?testStatusBar

The word "RIGHT" is not aligned to the right, but below the word "LEFT".

There must be a solution that also works for IE... 

Can you fix this?

Thank you

Magnus

---

 private void init_4 ()

 {

  final String stl_outer = "width:100%;";

  final String stl_lf = "float:left;";

  final String stl_ct = "text-align:center;";

  final String stl_rt = "float:right;";

  

  pnl_lf = createHTML (stl_lf);

  pnl_ct = createHTML (stl_ct);

  pnl_rt = createHTML (stl_rt);

  FlowPanel outer = new FlowPanel ();

  setStyle (outer,stl_outer);

  outer.add(pnl_lf);

  outer.add(pnl_ct);

  outer.add(pnl_rt);

  

  add(outer);

  

  addStyleName ("apl-StatusBar");

  pnl_lf.setHTML("LEFT!");

  pnl_rt.setHTML("RIGHT!");

  pnl_ct.setHTML("CENTER!");

 }

[Andrea Boscolo]

I see it misaligned even on firefox.
Anyway simply add the divs to the outer panel in the left, right, center order (not left, center, right as you did). Recheck my last fiddle.
AFAIK should work also in IE.

[Magnus]

Hi,

in the meantime I tried more than 5 different approaches, using divs with float or display:table/row/cell and that. All approaches work with all browsers except IE8! So I found that the problem may not be located within the CSS!

The key observation for me is that the problem went away while playing around with IE's display and document "modes": When switching to "IE8 standards mode", it works fine! When it didn't work, IE was in "IE 7 standards mode (page standard)".

So the non-working "IE 7 standards mode" is the "page standard". One approach could be to make IE asume that the working "IE 8 standards mode" is the "page standard". But how?
I found that my host page simply begins with "<!doctype html>". I know that this means "strict mode", but can we extend this so that IE assumes its "IE8 standards mode"?

My current goal is to make IE switch to "IE8 standards mode" automatically. I believe that it could be a solution to guide IE into that direction...

Magnus 

[Andrea Boscolo]

Actually a <!DOCTYPE HTML> declaration means standard mode, not strict. So you are fine with it.
See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Standards
To force IE8 standard mode try to add in the head element

<meta http-equiv="X-UA-Compatible" content="IE=8">

See http://code.google.com/p/google-web-toolkit/wiki/IE8Support

[Magnus]

Hi Thomas!

Am Dienstag, 18. Dezember 2012 09:15:05 UTC+1 schrieb Thomas Broyer:

Haven't looked in details but if you use display:table why are you using floats? why not use display:table-cell to split your row into 3 cells?

I have consequently used table-cell now, but IE8 keeps displaying it wrong: The word "RIGHT" is located below the word "LEFT".

http://www.bavaria64.de:8080/bcst2/index.html?testStatusBar

No matter which CSS technique I try, it's always wrong in IE8...

Magnus 

[Magnus]

Hi Andrea!

Am Mittwoch, 19. Dezember 2012 08:56:09 UTC+1 schrieb Andrea Boscolo:

 

<meta http-equiv="X-UA-Compatible" content="IE=8">

See http://code.google.com/p/google-web-toolkit/wiki/IE8Support

 

Thanks! This had the following effect:

The page is now set to "IE8 standards mode" by default.

But the layout is initially broken. When switching to another mode (using IE8 developer tools) and back to "IE8 standards mode", it's correct!!

I have no idea how to deal with this...

Magnus

[Abraham Lin]

Have you tried using either of DockLayoutPanel or LayoutPanel? Since you're already using layout panels, it should be fairly straightforward to use absolute positioning to create three DIVs of approximately equal width. Then you can just set the text-align property for each DIV as necessary.

-Abraham