How to force "div" widgets to be on the same row? (not use table)

48 views
Skip to first unread message

Qiushuang Zhang

unread,
Nov 30, 2009, 7:03:23 PM11/30/09
to Google Web Toolkit
hi experts,

As you know, a lot of widgets in GWT are implemented by div, such as
buttons. So, if I try to put some of these widgets together, each of
them will automatically get into the second row by the nature of div.

I don't want to use horizontal panel (basically a table) to force them
into the same row, because I want to minimize the usage of table to
keep the rendering speed. So I am currently using css: display:
inline-block. But it does not work for all browsers.
So, I am wondering what are you guys using to put these divs into the
same row?
Thanks!

Autumn

Jeff Chimene

unread,
Dec 1, 2009, 11:10:13 AM12/1/09
to google-we...@googlegroups.com
You can try playing with something like
<div>
 <div style="float: left">stuff</div>
 <div style="float: left">more stuff</div>
</div>

I've done some fairly complex layouts w/o tables. If you search for "layout omit tables" kind of query you should find several  examples from those who shun tables as layout canvas. I think alistapart would be a good starting point.

Nevertheless, shunning tables yet still using GWT is like  running down an up escalator. Just saying.


--

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



Yozons Support on Gmail

unread,
Dec 1, 2009, 11:53:44 AM12/1/09
to google-we...@googlegroups.com
And considering the complexity of the js-generated pages, a few tables probably doesn't hurt that much.  I mean, I've not seen any slow rendering issues in my experience.  But there are certainly times when it's nicer to have it clean, and there are some widgets like InnerHTML and InnerLabel that use span instead of div.

Thomas Broyer

unread,
Dec 1, 2009, 12:26:36 PM12/1/09
to Google Web Toolkit


On Dec 1, 5:10 pm, Jeff Chimene <jchim...@gmail.com> wrote:
>
> Nevertheless, shunning tables yet still using GWT is like  running down an
> up escalator. Just saying.

Not when you consider using UiBinder and/or the new Layout widgets.
Just saying.

;-)

Qiushuang Zhang

unread,
Dec 2, 2009, 2:00:03 AM12/2/09
to Google Web Toolkit
haha, that is an interesting saying
But don't you guys feel that GWT apps are very slow in loading?
I suspect it is because there are tons of unnecessary tables...


On Dec 1, 8:10 am, Jeff Chimene <jchim...@gmail.com> wrote:
> You can try playing with something like
> <div>
>  <div style="float: left">stuff</div>
>  <div style="float: left">more stuff</div>
> </div>
>
> I've done some fairly complex layouts w/o tables. If you search for "layout
> omit tables" kind of query you should find several  examples from those who
> shun tables as layout canvas. I think alistapart would be a good starting
> point.
>
> Nevertheless, shunning tables yet still using GWT is like  running down an
> up escalator. Just saying.
>
> On Mon, Nov 30, 2009 at 5:03 PM, Qiushuang Zhang <autumnc...@gmail.com>wrote:
>
>
>
> > hi experts,
>
> > As you know, a lot of widgets in GWT are implemented by div, such as
> > buttons. So, if I try to put some of these widgets together, each of
> > them will automatically get into the second row by the nature of div.
>
> > I don't want to use horizontal panel (basically a table) to force them
> > into the same row, because I want to minimize the usage of table to
> > keep the rendering speed. So I am currently using css:  display:
> > inline-block. But it does not work for all browsers.
> > So, I am wondering what are you guys using to put these divs into the
> > same row?
> > Thanks!
>
> > Autumn
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > .

philippe

unread,
Dec 2, 2009, 4:49:18 AM12/2/09
to Google Web Toolkit
display: inline works with all browsers

Thomas Broyer

unread,
Dec 2, 2009, 5:47:18 AM12/2/09
to Google Web Toolkit


On Dec 2, 8:00 am, Qiushuang Zhang <autumnc...@gmail.com> wrote:
> haha, that is an interesting saying
> But don't you guys feel that GWT apps are very slow in loading?
> I suspect it is because there are tons of unnecessary tables...

...only if you use those CellPanel-derived widgets. You're free to use
FlowPanel if you like (that's what we've been doing for nearly 2 years
now); but using a few HorizontalPanel shouldn't slow the app
noticeably (as we're doing too in some cases).

But regarding performances in loading, it all depends on what *you* do
onModuleLoad. Are you can build your layout all-in-one-go or
incrementally? (build the top-level container with "loading..."
placeholders, then in a DeferredCommand, replace a "loading..."
placeholder with a newly constructed widget, which might itself be
built incrementally using the same method) Are you constructing hidden
widgets or do you lazily initialize everything possible?

Have you profiled your app to know where the bottleneck is? (compile
in -style PRETTY so function names are understandable, or use the -
compileReport if you use GWT 2.0, and then use a profiling tool, such
as FireBug, Safari's Web Inspector, Chrome's Developer Tools, IE8's
Developer Tools, or dynaTrace Ajax Edition for older IE versions)
Reply all
Reply to author
Forward
0 new messages