Using jQuery.UI CSS Framework for DIV Styles

Question

a The project I'm working on now uses the jQuery UI for some of its widgets. To provide the user with a global look, I would like to use the framework for its css materials as well.

I am currently implementing a toolbar, such as a home page, where the user can see the general status of their data. This panel consists of several divs that should be aligned to the grid layout.

I am trying to style divs as 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 drag and drop and sort functions.

The problem I'm currently facing is that the boxes are not aligned correctly.

Does anyone have a hint about using jQuery.UI for this kind of css work? I studied CSS documentation at jqueryui.com, but not much information.

Best wishes,

Gordon

Answer 1

I tried your example and it works. I have not seen anything wrong ... Which browser are you using? if you use IE by accident, this can be a problem. Even if it is supposed to be a cross browser ... I do not use IE, so I cannot verify this, sorry. Try it with any other browser and see if this is fixed. Also make sure you include ui-core and ui-theme files. Do not include any other CSS file and see if this is fixed. I recommend you use firebug (in firefox) to see how styles are applied.

Check out how CSS is applied in this page . You may find this helpful.

Answer 2

Can you give an example where it does not work for you?

Perhaps you will load your own CSS after loading jQuery-UI-css and rewrite something.

Answer 3

If the content field and the title field do not align, perhaps this is due to different debugging in css, try to configure the addition to the content in the same way as in the title input field. This fixed the problem when I ran into it.