Re: How to make Div and Image flow inline in GWT?

.flowInline {

     float: left;

}

add these css class

.clr {

     clear: both;

}

When you have somthings "floatted" you must "clear" it. 

http://www.w3schools.com/cssref/pr_class_clear.asp

http://stackoverflow.com/questions/12871710/why-clear-both-css

<div>     <div class="{style.flowInline}" ui:field="text1Div" />     <g:Image ui:field="image1" addStyleNames="{res.css.flowInline}" />     <div class="{style.clr}"></div>  

   <div class="{style.flowInline}" ui:field="text2Div" />     <g:Image ui:field="image2" addStyleNames="{res.css.flowInline}" />     <div class="{style.clr}"></div>

</div>

On Wed, Jul 30, 2014 at 11:48 AM, Tom <HenryHa5@gmail.com> wrote:

There is following code in UiBinder

<div class="{style.flowInline}">     <div class="{style.flowInline}" ui:field="text1Div" />     <g:Image ui:field="image1" addStyleNames="{res.css.flowInline}" />     <div class="{style.flowInline}" ui:field="text2Div" />     <g:Image ui:field="image2" addStyleNames="{res.css.flowInline}" />  </div>

in Css

.flowInline  {      display:inline-block;  }

This is the requirement. I want the text1, image1, text2, image2, flow in the same line.

text1Div.setInnerSafeHtml(SafeHtmlUtils.fromSafeConstant("Please:<BR/> Click"));  text2Div.setInnerSafeHtml(SafeHtmlUtils.fromSafeConstant("and<BR/> Click"));

It should show the result:

Please:  Click [image1] and  Click [image2]  

But somehow it didn't work

If I don't use Div in UiBinder

<div>     Please: <BR/>     Click <g:Image ui:field="image1" /> and <BR/>     Click <g:Image ui:field="image2" />  </div>

Then it work fine

So, how to fix it?

http://stackoverflow.com/questions/25033666/how-to-make-div-and-image-flow-inline-in-gwt

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.