JQuery UI Toolbar Button Layout

Question

I am utilizing JqueryUI's toolbar.

I have two buttons on the toolbar currently. I'd like one button to align left, and one button to align right, while both still on the same line.

Currently all I am able to do is either get both butons to the left or right, or one button on the left and then the other on the right but on a lower line.

Here is my code snippet for the toolbar:

<span id="toolbar" class="ui-widget-header ui-corner-all">
                <div align='left'>
                        <input id='button' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/>
                        <input id='button' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" />
                </div>
        </span>

If you have any suggestions to get them on the same line I'd greatly appreciate it!

Boris Boris · Accepted Answer · 2012-11-07T00:04:29

I am not really sure what you want, but I would do something like:

<input id='button'class="left" type="submit" />
<input id='button' class="right" type='submit'/>

and add CSS classes to the buttons, so you can add a rule and float them:

.left {float: left;}
.right {float: right;}

check this live example.

NOTE I am not sure if this will work for you, because I don't know what CSS code you have.

Another issues I can think of is to check the css code for "ui-widget", because often it can cause problems. I personally use "inspect element" for Chrome or firebug for Mozilla, these tools can offer you "live" CSS editing as well as good debugging tool.

JQuery UI Toolbar Button Layout

1 Answers