View Full Version : Style rendering get screwed up between designer and deployment

23 Jul 2010, 2:11 PM
I've used designer for the first time to design a somewhat complex multi-tab form. Everything looks great in design mode, but if I preview or export and deploy, the layout gets completely jumbled. It *appears* that the labels are not being rendered in the proper style, although one of the tabs has some additional layout issues as well. Screen shots attached. Any ideas?


23 Jul 2010, 5:59 PM
Hi whipmeister,

The Designer has a CSS attribute on the html/body of font-size: 12px; That makes the font 12px in all places it's not explicitly defined. However, that's not out-of-the-box with the Ext JS CSS file, i.e., ext-all.css. When fields that have a "fieldLabel" are in a "form" layout, they get a font-size of 12px, but anywhere else they are completely based on the browser default size. Ditto with the standard "Label" component, they are based completely on the browser default unless told otherwise. I agree it's a little misleading in the Designer canvas, and maybe I can do something about that in a future release. But what you see in the Preview and in the browser are the actual result.

With that said, all you need to do is one of two things: 1) add "font-size: 12px;" to the "style" configuration option of your top most container, or 2) add html, body { font-size: 12px; } to your own stylesheet in your project html or css file.

Lastly, I recommend using a combination of containers with "form" layout and either "hbox" or CompositeField's to achieve the layout you have, instead of using the "absolute" layout. That way, you can use just fields with a "fieldLabel" supplied, instead of having a separate Label. "absolute" layouts are easy to use and straightforward, but no one at Sencha even recommends it (at least I don't :-) ) because it's not robust...it's too rigid. In other words, it doesn't perform right with a fluid width. Your UI will have to be a fixed width, and that's not always optimal. Definitely read up on the other layouts, particularly hbox and vbox. All layouts can be nested to achieve the UI you desire that is flexible with changing width and height. Just food for thought.

Hope that helps.

23 Jul 2010, 8:17 PM
Thank you for that awesome explanation. That will definitely help.

Right now I just need to present the straw man to the user community as a use case, so if I can get it to that point, I'm good.

As a vote to the team, I want to express our that absolute layout (positioning each element x,y, either relative or absolute) is key to one of our development strategies. Can't go into a defense of that in great detail in this forum, but it is the clearest path to fulfilling our requirements. Let me just say that I understand what you're saying about scale issues, but our requirement still supersedes that.

Thanks again.