Re: GWT/CSS text align problem

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?

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