Question

Why is there a giant white space in the middle of my accordion content?

This is how I have my .css, and it works completely with the exception of the white space in the middle.

#accordion .ui-accordion-content {
    background-color: #dcaf4d;
    color: #42dc86;
    font-size: 12pt;
}

Here is an example of the white space:

http://jsfiddle.net/bQ5Gd/5/

And before you ask, What is causing this white box inside my Jquery Accordion? does not solve the problem.

Was it helpful?

Solution

It's caused by this:

.ui-widget-content {
  border: 1px solid #AAA/*{borderColorContent}*/;
  background: #FFF/*{bgColorContent} url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
}

It's in the jquery-ui.css file around line 246.

An alternative is to change your own CSS. Try changing this:

#accordion .ui-accordion-content {
    background-color: #777;
}

to this:

#accordion .ui-accordion-content {
    background: #777;
}

OTHER TIPS

It is because the default background is assigned by an background image so setting it to none should solve it

#accordion .ui-accordion-content {
    background-image: none;
    width: 100%;
    background-color: #777;
    color: #000;
    border: none;
    font-size: 10pt;
    line-height: 15pt;
}

Demo: Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top