Using jQuery.UI CSS Framework for DIV Styling

Question

Hi folks,

a Project I am currently working on uses the jQuery UI framework for some of its widgets. To provide the user with a global look and feel I would like to use the framework also for its css stuff.

I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.

I try to style the divs like follows

<div class="ui-widget">
  <div class="ui-widget-header">Box Header</div>
  <div class="ui-widget-content">
    Content of the Box
  </div>
</div>

Later I would like to implement some draggable-and-sortable functionality.

The Problem I am facing right now is that the boxes aren't properly aligned.

Does anyone has a hint on using jQuery.UI for that kind of css work? I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.

best regards,

Gordon

Answer 1

Hi Gordon, I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.

Check how the CSS is applied in this page. You may find it useful.

Answer 2

Can you provide an example where it doesn't work for you?

Maybe you load your own css after you load the jQuery-UI-css and overwrite something.

Answer 3

If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.