jquery - CSS for toolbar with UI Slider centered between left and right buttons


I'm attempting to create a 100% width toolbar. This toolbar needs to have a variable number of buttons aligned to the left side, as well as a variable number of buttons aligned to the right. That's the easy part.

But now I want to put a jQuery UI slider in the center that takes up the full remaining space between the buttons on the left and the buttons on the right. I'm having troubles figuring out a pure-CSS way of doing this.

I've tried something like below, but I really don't want to have fixed percentage widths. If there is only one button on the left and one on the right, then I want the centered slider to take the full space between them, not just 33% of the full width.

.toolbar {width: 100%;}
.toolbar .toolbar-left {float: left;width: 33%;}
.toolbar .toolbar-right {float: right;width: 33%;}
.toolbar .toolbar-center {margin: 0 auto;width: 33%;}

I'm using UI Buttons for my buttons and styling -- see an example. In that example, there is a toolbar that is the full width of the page. Imagine the two right most sets of buttons being aligned to the right of the toolbar. Then in the middle empty space, I want to put a UI Slider, and use all the space between buttons (minus some padding).

Is there a way to do this with CSS, or will I need to whip up some javascript to position things properly?


In case it helps anyone, here's what I came up with to make this work, based on @Ken's suggestions. Note that it supports multiple toolbar-left and toolbar-right blocks within the toolbar, but only one toolbar-center. I also added a little padding in the code, but that could probably be handled by CSS.

<div class="toolbar ui-helper-clearfix">
<div class="toolbar-left">Left buttons</div>
<div class="toolbar-right">Right buttons</div>
<div class="toolbar-Center">
    <div class="slider"></div>

.toolbar .toolbar-left {float: left;}
.toolbar .toolbar-right {float: right;}
.toolbar .toolbar-center {position: relative;}

$(".toolbar").each(function() {
    var $this = $(this);
    var left = 0;
    $(".toolbar-left", $this).each(function() {
        left += $(this).outerWidth();
    var width = $this.outerWidth() - left;
    $(".toolbar-right", $this).each(function() {
        width -= $(this).outerWidth();
    var $center = $(".sz-toolbar-center", $this);
    width -= ($center.outerWidth() - $center.width());
    $center.width(width - 30);
    $center.css({"left": (left+15)+"px"});

One issue to be aware of is that resizing the browser window doesn't recalculate the toolbar size. So make sure this code gets called whenever the toolbar width is changed, including resizing the browser window, etc.

1 Answer: 

If you wan't the left/right parts to be sized to their contents then you'll need to float them. If you float them you can't get the center one to fill the remaining space like you want.

Go with JavaScript or use a not-semantic <table> element.


More Articles

visual c++ - OnInitMenuPopup does not init correctly when called from a toolbar button that was a POPUP menu in the App main menu bar

To make a long history short, imagine my main menu is a CMFCMenuBar which menu is defined by:IDR_MAINFRAME MENUBEGIN POPUP "&File" BEGIN MENUITEM "New", ID_FILE_NEW MENUITEM "Open", ID_FILE_OPEN MENUITEM "Save", ID_FILE_SAVE

ios - How to create toolbar in separate xib file and separate class and use it in multiple view controllers?

How to create a toolbar in a separated xib file and separate class and use it in multiple view controllers?

android - Single Activity and Multiple Fragment with different toolbar layouts

I have an app with Single Activity multiple Fragments architecture in my app. The problem is, there is one listing fragment with normal Toolbar, from here user can click and go to Details screen. Now in Details screen, I want the Activity to become Fullscreen with CoordinatorLayout and Collapsing To

c++ - MFC: How to save the position of toolbars in the legacy MFC ver 6?

I have a striking question: How to save the position of toolbars in the legacy MFC ver 6?I can't use CWinApp::SaveBarState because not all toolbars exist at the moment this function would be called (causing it to assert). Instead, I instantiate the toolbars depending on what kind of document is load

android - Different toolbar for each fragment in navigation drawer

I have a MainActivity which has a NavigationDrawer. This NavigationDrawer is Synced with the Toolbar initially. And i want to use the Only one NavigationDrawer across the whole Application. Now the Problem is that each fragment has the different toolbar or CollapsingToolbar.I already read the same

WPF c# window navigation

i got 2 window , i want to navigate from one another but i when i debug it , it shows that nav is null , why is that so? Does it suppose to be null? because i used the same way to navigate in the past and it work and i try it now , it doesn't work. But if i put nav == null , it says nav.Navigate(n

android - Horizontal and Vertical linear layout inside a scroll view

I am trying to get a combination of Views established. They must constantly have a Button and Edittext box at the top horizontally next to each other and below that a vertical list of Textviews. The vertical list should be enclosed in a ScrollView to allow the user to scroll down through the TextVie

WPF Frame Source Refreshing the Loaded Page

I've come across a strange scenario where a frame refuses to refresh its content.I can kinda understand what's happening but the solution is not coming to me.I have a page that has a frame (Frame1) and several buttons. When I click on a button a page is loaded into the frame. This works perfectly in

Android: pin TabLayout to top of Scrollview

I was looking at the twitter app on my phone.You can see that when a user scrolls up, the tabLayout actually just pins itself onto the bottom of the toolbar nicely and does not move at all.I thought maybe they did it by just putting all of the top part of the app (the profile picture, the profile wa

material design - android lollipop toolbar: how to hide/show the toolbar while scrolling?

I'm using the new toolbar widget introduced in the appcompat / support-v7. I would like to hide/show the toolbar depending on if the user is scrolling up/down the page, just like in the new Google's playstore app or NewsStand app. Is there something built into the toolbar widget for this or should I