Question

I have modified jquery mobile a little so a collapsible with data-type=”horizontal” converts into a tab-viewer.

See my example page here – tabview

The one problem I have with it, is the need to position elements absolute/relative.

I need to absolutely postion the collapsible-content in relation to the relatively positioned .ui-collapsible-set to make the collapsible content section span across the full tabview width.

I would like to know if there are any workarounds to avoid positioning elements like this, because it creates all kind of problems in the regular flow of elements on a page.

Thanks for some input!

Answer 1

Ok I found a way, which is awkward, but working…

Can be done with css like this:

.ui-collapsible-set-horizontal.ui-grid-a .ui-block-a .ui-collapsible-content {
    position: relative;
    width: 199.3%;
    padding: 0;
    }
.ui-collapsible-set-horizontal.ui-grid-a .ui-block-b .ui-collapsible-content {
    left: -100%;
    width: 199.3%;
    position: relative;
}

my problem was that I had to set pos:absolute on .ui-collapsible-content in order for the this element to cover the whole tabview.

The above works for a two grid tab, so basically I’m setting the width to twice the element width (a tabview-set, 2 tabs, each 100% width = set to 200%, 3 tabs, set to 300% etc) and using pos:relative to position the 2nd, 3rd, 4th tab to the left by all preceding tabs’ width.

Works nicely and since I’m not using pos:absolute anymore, the content section now doesn’t have to be set hardcoded (height 123px), but expands depending on the content contained.