0

I am looking to display labels based on the condition for that I am trying to use Outputpanel. But, If I use Outputpanel "li" tag styles are changing and Underline is coming on labels when we put mouseover on labels. It was coming good when we don't use outputpanel.

Here is the code:

      <apex:outputPanel rendered="{! IsFrenchClient}">
    <li class="navmenu-item2">
        <apex:outputLink value="/apex/Web_LatestNews_LTG?tags=Glass%20School&thematicPage=1">
            Glass School
            <img class="menu-icon" src="{!URLFOR($Resource.picto_glassschool_white)}"/>
        </apex:outputLink>
    </li>
         </apex:outputPanel>

     <apex:outputPanel rendered="{! IsFrenchClient}">
    <li class="navmenu-item2">
        <apex:outputLink value="/apex/Web_LatestNews_LTG?tags=Decor&thematicPage=1">
            Décors
            <img class="menu-icon" src="{!URLFOR($Resource.picto_decors_white)}"/>
        </apex:outputLink>
    </li>
             </apex:outputPanel>

O/P:

enter image description here

Is there any other option to display list based on the condition without changing the styles? OR please guide me using with Outputpanel. Thanks.

Improve this question
2
  • An output panel just renders a <div> element. You may need to adjust your CSS to compensate for that.
    – David Reed ♦
    Jun 12, 2018 at 11:53
  • We already have used styles for "li". It was coming good when we don't use outputpanel and Underline is coming now on labels when we put mouseover on labels. I think need to create new styles and adjust.
    – Ravindar D
    Jun 12, 2018 at 12:12

1 Answer 1

Reset to default
0

I suspect this is happening because an output link will normally apply an underline to a link if it's created as text. It appears to me that the underline you see is for your text label and is being extended to underneath your icon. I think you're going to need to create some custom CSS unless you want the image to be the actual link. If the latter is the case, change the link to only wrap the image.

Improve this answer
3
  • <li class="navmenu-item2"> <apex:outputLink value="/apex/Web_LatestNews_LTG?tags=Selective%20Line&thematicPage=1"> Selective Line <img class="menu-icon" src="{!URLFOR($Resource.picto_selective_white)}"/> </apex:outputLink> </li>
    – Ravindar D
    Jun 12, 2018 at 12:42
  • We can see the Label: "Selective Line" in O/P(Image). We used <img> tag under <outputlink> tag for all the labels : But didn't use rendered for "Selective Line" label. How to change the link to only wrap the image. Can you guide. Please check the above code for "Selective Line" , It is taking link on image.
    – Ravindar D
    Jun 12, 2018 at 12:52
  • You'll need to do one of two things. Either change the hover attributes (won't change when someone has their browser defaults set to override your styling) in your CSS. Or, you'll need to make the image the only thing that's active by moving the text to right after <li class="navmenu-item2"> but before the <apex:outputLink value=. That will make only the image an active/clickable link and your text won't be active which may not be what you want to do. list elements were never meant to be rendered as table elements.
    – crmprogdev
    Jun 12, 2018 at 16:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .