How do I get rid of the padding in my Sencha Touch 2 toolbar?

Question

here it is: http://jsfiddle.net/sd1212/awHkT/2/

There is space between the buttons and I don't want that. I used firebug to try to eliminate the padding. I thought that the layout class was:

 x-inner x-toolbar-inner x-layout-hbox

so in my CSS file, I put:

.x-inner x-toolbar-inner x-layout-hbox
{
   padding: 0 !important;
}

Nothing happened.

Can someone help me out?

Thanks in advance

Answer 1

A couple of things wrong here

CSS Syntax

.x-inner x-toolbar-inner x-layout-hbox is a wrong syntax.

If you have something like this

<div class="x-inner">
  <div class="x-toolbar-inner">
    <div class="x-layout-hbox">

Then you'd use :

.x-inner .x-toolbar-inner .x-layout-hbox

or

.x-inner > .x-toolbar-inner > .x-layout-hbox

If you have something like this :

<div class="x-inner x-toolbar-inner x-layout-hbox">

Then you'd use :

.x-inner.x-toolbar-inner.x-layout-hbox

No padding on .x-inner.x-toolbar-innerx-layout-hbox

If you inspect the div with these CSS class, you can see in Firebug that there is not defined padding. So setting it again to 0 won't change anything.

Remove the space between the buttons

However, buttons have a set padding and margin defined like so :

.x-toolbar .x-button {
  margin: 0 .2em;
  padding: .3em .6em;
  height:2.2em // of whatever you want
}

So you should override this class if you want to modify it

Last but not least : Don't override Sencha Touch CSS classes

Don't override Sencha Touch CSS classes, use the cls the attribute on your toolbar like :

cls:'my-toolbar',

and then to something like this :

.my-toolbar .x-button {
  margin: 0;
  padding: 0;
  height:2.2em // of whatever you want
}

Hope this helps