SelectBox in topbar

Post Reply
UlrichC
Posts: 13
Joined: 03 Sep 2015, 23:49

12 Aug 2016, 13:34

HI altogether,

I have a little problem with a "p:selectOneMenu" in the topbar. Functionally, it works, but it is displayed a bit strang. If I hover over the down-arrow of the selectonemenu, the right half of the "square with the arrow" gets the color of the background, and the left halb of this square gets a bit grey (background of the selectonemenu is white).

Even with z-index:10 or above, nothing changed.

Did you have any idea, how this can be solved?

Thanks you very much in advance,
Ulrich

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

16 Aug 2016, 13:09

Please try;

Code: Select all

<p:selectOneMenu style="background-color: white" .../>

UlrichC
Posts: 13
Joined: 03 Sep 2015, 23:49

20 Aug 2016, 09:58

I tried that already, but nothing changed.. I also tried z-index, but this does not have any effect either...

wahuu
Posts: 2
Joined: 20 Aug 2016, 20:18

20 Aug 2016, 20:32

Similar issue with basic SelectOneMenu.

Image

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

23 Aug 2016, 11:17

Hi UlrichC,

Can you please attach a sample topbar.xhtml for us to replicate?

Hi Wahuu,

I couldn't replicate it. Can you please a sample xhtml page? And which theme and PF version are you using?

wahuu
Posts: 2
Joined: 20 Aug 2016, 20:18

28 Aug 2016, 12:42

Hi aragorn,
Currently i'm using primefaces version 6.0 and delta theme 1.0.10. But i also tried bootstrap and no change.

Here is my sample xhtml file:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/common-template.xhtml"
	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">

	<ui:define name="content">
		<h1>Settings</h1>
		<p:selectOneMenu id="value" value="#{settingsForm.value}"
			style="width:125px">
			<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>
	</ui:define>
</ui:composition>

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

08 Sep 2016, 14:34

There are two solutions;

Code: Select all

<style type="text/css">
    .ui-selectonemenu .ui-selectonemenu-trigger {
        padding: 0 6px;
    }
    .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
        margin-top: 5px;
    }
</style>
OR

Code: Select all

<style type="text/css">
    .ui-widget {
        font-size: 90%;
    }
</style>

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest