SelectOneButton responsive

[bigzidane]

Hello Team,

I'm using SelectOneButton to present letter A to Z horizontally. It is working fine on laptop's browser. Same page on phone such as iPhone, all buttons (from A to Z) drop vertically which is not looking good.

Could we somehow change from SelectOneButton to SelectOneMenu dropbox like Sort function of DataTable?

Thanks,
Nghia

[mert.sincan]

It is not possible with SelectOneButton. But maybe, you can try the following workaround for this case;

Code: Select all

//Css
.ShowOnMobile {
    display: none;
}

@media(max-width:640px) {
    .ShowOnDesktop {
        display: none;
    }

    .ShowOnMobile {
        display: block;
    }
}

//xhtml
<p:selectOneButton styleClass="ShowOnDesktop">
    <f:selectItem itemLabel="A" itemValue="A" />
    <f:selectItem itemLabel="B" itemValue="B" />
    <f:selectItem itemLabel="C" itemValue="C" />
    <f:selectItem itemLabel="D" itemValue="D" />
    <f:selectItem itemLabel="E" itemValue="E" />
    <f:selectItem itemLabel="F" itemValue="F" />
</p:selectOneButton>

<p:selectOneMenu styleClass="ShowOnMobile">
    <f:selectItem itemLabel="Select Item" itemValue="" />
    <f:selectItem itemLabel="A" itemValue="A" />
    <f:selectItem itemLabel="B" itemValue="B" />
    <f:selectItem itemLabel="C" itemValue="C" />
    <f:selectItem itemLabel="D" itemValue="D" />
    <f:selectItem itemLabel="E" itemValue="E" />
    <f:selectItem itemLabel="F" itemValue="F" />
</p:selectOneMenu>