jQuery toolbar to display title

Question

I would like to create a Toolbar with title in using jQuery UI.

Until now I have:

HTML:

<div class="demo">

  <span id="toolbar" class="ui-widget-header ui-corner-all">
    <label>go to beginning</label>
    <button id="Submit">Submit</button>    
  </span>

</div>

CSS:

#toolbar {
    padding: 10px 4px;
    width: 500px
}

Javascript:

 $(function() {
    $( "#Submit" ).button({
    });
 });

Link:

http://jsfiddle.net/CKvYv/59/

It looks really aw-full for a toolbar with title. I would like to make its width: 100% and fix the button to be shown inside the toolbar.

Is that possible?

Do you have to propose something easier and prettier?

Thanks

Answer 1

You are having all CSS problems. You should make the toolbar a div instead of span with CSS markup of 100% width. The button size is controlled through the CSS font-size markup.

Here is the code from your jsfiddle with 2 button:

HTML

<div class="demo">

<div id="toolbar" class="ui-widget-header ui-corner-all">
    <label id="title">go to beginning</label>
    <button id="Submit">Submit</button>
    <button id="Submit2">Submit2</button>
</div>

CSS

#toolbar {
    width: 100%;
    padding-left : 4px;
}

#title {
    padding : 0px 4px; 
}

.ui-button {
    font-size : 11pt;
}

JavaScript

$(function() {
    $( "#Submit" ).button();
    $( "#Submit2" ).button();
});

Answer 2

The toolbar should be a DIV, and the CSS for #toolbar should have a width of 100%. That would be a start.