"p: selectOneMenu - displayed text overlaps with the symbol for expansion

Post Reply
bogdan.nica
Posts: 8
Joined: 22 Dec 2020, 17:28

08 Feb 2021, 15:23

Hello, I use Rain Theme (extended license).
In the "p: selectOneMenu" component, the displayed text overlaps with the symbol for expansion, on the right, as seen in the image

image link: https://drive.google.com/file/d/1Pw4mpA ... sp=sharing

My code is:

<p:selectOneMenu id="..." value="#{...}" style="width: 170px" validatorMessage="..." converterMessage="..." requiredMessage="...">

What is the solution for remediation?

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

10 Feb 2021, 11:50

Hi,

Unfortunately I could not reproduce your issue. Do you have any overrides on the theme?
Normally there is a css "overflow: hidden" on the selectonemenu label. This problem may occur if you changed the label width other than the 170px you provided.
Could you please send a complete code block?

Best Regards,

bogdan.nica
Posts: 8
Joined: 22 Dec 2020, 17:28

11 Feb 2021, 15:58

Hi,
a complete xhtml file:
Thanks very much

Code: Select all


<html 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">

    <h:head>
        <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
       
    </h:head>
    
    <h:body> <!--<h:body style="background-color: #2B394F !important">-->
        <p:panelGrid>
<!-- antet -->
            <f:facet name="header">
                <p:row>
                    <p:column colspan="2" style=" height: 33px; padding: 0px">Filtre</p:column>
                </p:row>
                
            </f:facet>
            
<!-- responsabil achizitie filtru -->
            <p:row>
                <p:column colspan="2" style="text-align: right; width: 250px; border: none; padding-top: 7px; padding-bottom: 7px; padding-left: 0px; padding-right: 0px">
                    <p:selectOneMenu id="respAchizitieFiltru" value="#{global.filtruObj.idRespAchizitieL}" style="width: 170px" validatorMessage="Selecteaza o valoare in campul 'Filtre / responsabil achizitie'" converterMessage="Selecteaza o valoare in campul 'Filtre / responsabil achizitie'" requiredMessage="Selecteaza o valoare in campul 'Filtre / responsabil achizitie'">
                        <f:selectItem itemLabel="responsabil achizitie" itemValue="0" />
                        <f:selectItems value="#{global.angajatiRespAchizFiltruLS}" var="respAchizitieFiltru" itemValue="#{respAchizitieFiltru.idL}" itemLabel="#{respAchizitieFiltru.numeS.concat(' ').concat(respAchizitieFiltru.prenumeS).concat(' - ').concat(respAchizitieFiltru.functieS)}" />
                    </p:selectOneMenu>
                    <p:tooltip for="respAchizitieFiltru" value="Responsabil achizitie pentru filtrare" position="bottom" showEffect="clip" hideEffect="explode" showDelay="750"/>
                </p:column>
            </p:row>


.............................................


        </p:panelGrid>
    </h:body>
</html>


bogdan.nica
Posts: 8
Joined: 22 Dec 2020, 17:28

16 Feb 2021, 12:53

an idea, please ...

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

18 Feb 2021, 07:42

Hi,

Really sorry for delayed response! I tried your code block. But i cant see any problem.
I also did a thorough theme and code review. Could you be using an old version of primefaces. Please write the version of primefaces you are using.
This may not be a theme based issue. If you haven't use any custom styles or themes overrides, of course!

After your reply, I will help you as soon as possible. Again, sorry for the delay.
Best Regards,

bogdan.nica
Posts: 8
Joined: 22 Dec 2020, 17:28

27 Apr 2021, 11:31

Hello, sorry for the late reply. I use primefaces 8.0

and the new link:
https://drive.google.com/file/d/1Pw4mpA ... sp=sharing

Thanks.

mert.sincan
Posts: 4755
Joined: 29 Jun 2013, 12:38

04 May 2021, 15:11

Hi,

Could you please try the following css style?

Code: Select all

body .ui-selectonemenu .ui-selectonemenu-label {
    text-overflow: ellipsis;
}
Best Regards,

bogdan.nica
Posts: 8
Joined: 22 Dec 2020, 17:28

15 Jul 2021, 14:31

I try, but it's not work ...

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

16 Jul 2021, 07:12

Hi,

Where and how did you try? Could it be that you did not sass compile the style you added or could not add it completely?

Best Regards,

Post Reply

Return to “Rain - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest