Results 1 to 2 of 2

Thread: padding and margins in uibinder vs styles

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Vote Rating

    Default padding and margins in uibinder vs styles

    I've been defining margins in layoutData of my uibinders. I assumed that I needed to do it there instead of in css, so that gxt can figure out sizes when doing the layout. But if that is true, I would expect setPadding to be at the Component level, but there seem to be only a very few Components that have a setPadding.

    In general, I don't understand when and why I should set margins/padding in uibinder vs in styles. Is there a general rule for this?

  2. #2
    Sencha - Support Team
    Join Date
    Jan 2012
    Arlington, WA
    Vote Rating

    Default UiBinder vs Styles question...

    Could I ask what you mean when you mention "uibinder vs in styles", what does styles refer to? Generic CSS style sheet?

    When I use the UiBinder I like to begin by setting the styles like padding and margins with in the component's UiBinder. As the project grows I'll start to boiling down the redundancies and start to add the common styling elements to CSS resources with a style sheet. I find that when the styling is in the Widget uibinder style makes for easy copying of the widgets to other projects. Although once its added to CSS resources it couples it with the project more deeply.

    Overall I like to set the components styling property in the <uityle/> element and if the project grows may move it to CSS Resources. So I would say it's more often user preference than a rule that is found.
    I noticed the mention of layoutData GXT layout chain appropriately handles sizes depending on the container and they take care of layout. This is why you may not see many set padding/margins with them. Although anything goes for Widgets style.

    Adding margins to the layout data lets the layout container take care of assigning those values when computing sizes and positions. If using a layout container that manages sizes and setting margin as a way to add spacing between components. In contrast, padding is the space within the border - it is meant to be space inside the widget, and you are now changing how the widget is drawn, as opposed to how the widget is drawn in its parent.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts