Width Demos

We had some requests to be able to control the various foobar section widths in a smarter way. So you can now use * to tell a foobar section to auto fill any remaining space. Multiple sections with * set as the width will divide up any remaining space and share it evenly.

The only width which must have a valid value set (px, %, etc.) is that of the button. If the value is set to null or * there will be rendering issues and the button may not be displayed at all.

To be able to make full use of the width options you must first understand how the bar is constructed. There are 5 main sections of the bar, the below lists these and the colour they will appear as on this demo page.

The only section that you cannot change the width of directly is the button spacer. This is dynamically generated if the display.button.spacer option is set to 'true', which it is by default, and will be the same width as the button but positioned immediately opposite it. This spacer was added to allow messages to be exactly centered within a page while still being able to use the * value for fluid layouts.


The below are some examples of how you can now adjust the widths of the foobar. Once you click on a demo resize your browser to see the effect.


Fixed Center & Fluid Sides

The below example shows how you can set the widths of the bar so that the center section which displays the messages has a fixed width while the sides auto fill the remaining space.

$foobar({
  "width": {
    "left": "*",
    "center": "500px",
    "right": "*",
    "button": "80px"
  }
});
fixed center

Fixed Sides & Fluid Center

The below example shows how you can set the widths of the bar so that the sides are set to a fixed width while the center auto fills the remaining space.

$foobar({
  "width": {
    "left": "200px",
    "center": "*",
    "right": "200px",
    "button": "80px"
  }
});
fixed sides

No Sides

The below example shows how you can set the widths of the bar so that the sides are hidden while the center auto fills the remaining space.

$foobar({
  "width": {
    "left": "0",
    "center": "*",
    "right": "0",
    "button": "80px"
  }
});
no sides

If you want you can remove the button spacer so the center extends right up to the outer left or right edge depending which side the button is positioned. Just note that the message is no longer exactly centered.

$foobar({
  "width": {
    "left": "0",
    "center": "*",
    "right": "0",
    "button": "80px"
  },
  "display": {
    "button": {
      "spacer": false
    }
  }
});
no sides or spacer