p:selectCheckboxMenu panel in RTL

[achaheen]

Hi,

I'm using a p:selectCheckboxMenu in RTL template, but the check box button still come in the left side which makes it not correctly aligned on the layout.

Is there any way to fix it using customized CSS ?

[mert.sincan]

Please try with;

Code: Select all

// Css
.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item .ui-chkbox {
    right: 10px;
}

.test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
    float: right;
}

.test .ui-selectcheckboxmenu-header .ui-chkbox {
    float: right;
}

.test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close {
    float: left;
}

.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
    text-align: right;
}

.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
    padding-left: 0px;
    padding-right: 3em;
}

// xhtml
<p:selectCheckboxMenu panelStyleClass="test" .../>

[achaheen]

Thanks Aragon,

I've tried your code but I've got this new result.





The old check box keeps as it and another new check box comes above the label.

[mert.sincan]

Screenshot with my css code;


Can you please attach a sample test.xhtml for us to replicate? and what pf-version are you using?

[achaheen]

Hi aragon,

I'm using PF 5.1 and this is a code snippet

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:p="http://primefaces.org/ui">

	<p:panel header="#{topic.Reports_CriteriaPanel}">
		<h:panelGrid columns="1">
			<p:panelGrid id="SearchPanelGrid" columns="4">

				<p:outputLabel for="mainCat" value="#{mcat.MainCat_MainCategory}">
				</p:outputLabel>

				<p:selectOneMenu value="#{bean.mainCat}" id="mainCat"
					style="min-width:250px;" required="false"
					requiredMessage="Please select main category">
					<f:selectItem itemValue="#{null}" itemLabel="-----"></f:selectItem>
					<f:selectItems value="#{bean.allowedMainCats}" />
					<p:ajax immediate="true"
						listener="#{bean.resetMainCatSelection()}"
						update="SearchPanelGrid"></p:ajax>
				</p:selectOneMenu>
				<p:outputLabel for="subCat" value="#{mcat.MainCat_SubCategory}"></p:outputLabel>
				<p:selectOneMenu id="subCat" value="#{bean.sub}"
					style="min-width:250px;" required="false">
					<f:selectItem itemValue="#{null}" itemLabel="-----"></f:selectItem>
					<f:selectItems
						value="#{bean.getAllowedSubsFromMainCat(bean.mainCat)}" />
					<p:ajax immediate="true" update="SearchPanelGrid"></p:ajax>
				</p:selectOneMenu>
				<p:outputLabel for="topic" value="#{topic.Topic_Topic}"></p:outputLabel>
				<p:selectCheckboxMenu panelStyleClass="test" id="topic"
					required="false"  
					value="#{bean.topicList}">
					<f:selectItems
						value="#{bean.getAllowedTopicsFromSub(bean.sub)}"
						var="top" itemLabel="#{top.toString()}" itemValue="#{top.id}" />
				</p:selectCheckboxMenu>
				 
			</p:panelGrid>
			 
		</h:panelGrid>
		 
	</p:panel>

<style>

.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item .ui-chkbox {
    right: 10px;
}

.test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
    float: right;
}

.test .ui-selectcheckboxmenu-header .ui-chkbox {
    float: right;
}

.test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close {
    float: left;
}

.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
    text-align: right;
}

.test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
    padding-left: 0px;
    padding-right: 3em;
}

</style>
</ui:composition>

[mert.sincan]

I could not replicate the issue with your code and PF-5.1. Please try with my test page;
test.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item .ui-chkbox {
                right: 10px;
            }

            .test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
                float: right;
            }

            .test .ui-selectcheckboxmenu-header .ui-chkbox {
                float: right;
            }

            .test .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close {
                float: left;
            }

            .test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
                text-align: right;
            }

            .test.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
                padding-left: 0px;
                padding-right: 3em;
            }

        </style>
    </ui:define>

    <ui:define name="content">
        <div class="layout-portlets-box">
            <div class="Container100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SelectOneMenu</h1>
                    <p:panel header="TEST" >
                        <h:panelGrid columns="1">
                            <p:panelGrid columns="4">
                                <p:outputLabel for="console" value="Basic:" />
                                <p:selectOneMenu id="console" style="min-width:250px;" required="false"
                                                 requiredMessage="Please select main category">
                                    <f:selectItem itemLabel="Select One" itemValue="" />
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneMenu>

                                <p:outputLabel for="car" value="Basic 2: " />
                                <p:selectOneMenu id="car" style="min-width:250px;" required="false">
                                    <f:selectItem itemLabel="Select One" itemValue="" />
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneMenu>

                                <p:outputLabel for="op" value="SelectCheckBoxMenu: " />
                                <p:selectCheckboxMenu id="op" label="Cities" panelStyleClass="test" style="width:300px;">
                                    <f:selectItem itemLabel="Option 1" itemValue="1" />
                                    <f:selectItem itemLabel="Option 2" itemValue="2" />
                                    <f:selectItem itemLabel="Option 3" itemValue="3" />
                                </p:selectCheckboxMenu>
                            </p:panelGrid>
                        </h:panelGrid>
                    </p:panel>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>

[achaheen]

Aragon,

your solution solved my problem from the first time, sorry I was testing in the wrong page in my code.

thanks so much.

[mert.sincan]

Glad to hear, thanks

[achaheen]

Thanks so much Aragon.

Primefaces new professional themes are great added value to Primefaces Framework, however we are looking for more RTL support as all themes layout provided are not RTL.

Thanks and Appreciated.

[mert.sincan]

Thanks so much

We plan to add RTL support one of the Premium Layouts in future. Exp; RTL top menu or right layout menu, ..