Search code examples
jquery-mobilejquery-mobile-listviewjquery-mobile-collapsible

jQuery Mobile, remove space in collapsible with listview


When I click on the top left button and click hardware, the space between each li is to much. I would like it to be 0. How can I do that?

I have tried varoius solutions, but nothing works.

Here is my jsfiddle

I have tried some custom css:

 .custom-li {
    padding: 0 !important;
    border-width:0 !important;
}

.custom-li +li {
    border-top-width: 0 !important;  
}

.custom-li li[data-role="collapsible"]{
    margin: 0 !important;   
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width:0 !important;
}

Solution

  • Add in your css

    .ui-listview, .ui-listview > li{margin-bottom:-22px;}
    

    Demo