Remove padding between accordion elements

1
votes

I'm trying to remove padding between elements in accordion.

Using example: http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/#layout-accordion I was able to remove padding on left and right simply removing:

.x-accordion-layout-ct {
padding: 5px 5px 0;
}

EDIT: I've managed to do this part via code (adding this to Ext.define):

bodyStyle: 'padding: 0',

But I cant remove padding between elements:

enter image description here

I'm trying to squeeze everything so I would like those paddings to disappear.

ideally I would like to get something like this: enter image description here

How can I remove rest of padding via code or CSS?

EDIT: This is version that is almost perfect (thanks to @David Thomas): http://jsfiddle.net/cPQz9/

This is CSS I've used:

.x-panel {
    margin: 0;
}
.x-accordion-layout-ct {
padding: 0;
}
.x-accordion-item:not(:last-child) {
    border-bottom: 1px solid red;
}

but I'm worried about browser compatibility - last selector might not work in all browsers.

1
javascriptextjsextjs4.2
May I ask why you want to leave CSS unmodified? At least I am the kind of person who prefers doing as much as possible with CSS. :) In my experience, this kind of thing is usually pretty easy to override in your own stylesheet. - Emil Lundberg
I started doing this with CSS because adding simple overrides inside my CSS worked quite well, I've managed to remove padding on left and right via code too (please see my edited question) - Misiu
Are you able to post a live demo we can work with, rather than having to create our own demos to help you? - David says reinstate Monica
Sorry for that, here is fast copy of demo that I provided in my question: jsfiddle.net/D5gsq (You must collapse and expand section to get sample to display correctly) - Misiu

1 Answers

3
votes

I'd suggest the following:

.x-panel {
    margin: 0;
}

JS Fiddle demo, tested only in Chrome 27/Windows XP.