I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.
e.g. I want every option of coffee in the list below to be displayed in a different color.
<h:selectOneMenu value="#{user.favCoffee1}">
<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>`
Can anyone help me out here?
The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.
<h:selectOneMenu styleClass="mymenu">
with
.mymenu option {
color: red;
}
Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.
I’m not familar with JSF, but I assume the <f:selectItem> is not what gets sent to the browser.
You’ll need to figure out what HTML is sent to the browser for that JSF tag, and apply your CSS to that.
Related
After a good scrape of the web I am close to resolved that there is no nice way of doing this with the package we are using but I turn to you as a last hurrah!
The package in use is element-plus, and the component my question relates to is the Select component, specifically with the flag multiple.
Logically, this works exactly as expected this question is %100 about styling.
Code below:
<el-select
v-model="specialistsData"
multiple
filterable
remote
reserve-keyword
placeholder="Please type a specialist name"
remote-show-suffix
:remote-method="remoteMethodSpecalist"
:loading="loading"
:disabled="isShowAllSpecialist"
#change="filterSpecialists"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
Is it possible to style the tags in the multiselect? I know you can style the dropdown items using the <el-option>, but we need to style the actual select tags, conditionally per item. See dreadful snipping tool picture for example. ANY ideas welcomed.
it's unclear to me what exactly you're after, plus element-plus doesn't seem to provide a any way to pass properties to the tag elements.
However, if you're ok using the order (background not tied to select) you could use nth-child() css selector
<style>
.el-select .el-select__tags .el-tag--info:nth-child(1){
background-color: khaki;
}
.el-select .el-select__tags .el-tag--info:nth-child(2){
background-color: skyblue;
}
.el-select .el-select__tags .el-tag--info:nth-child(2) .el-select__tags-text{
color: darkslateblue;
}
</style>
example
My objective is simple enough i just want to modify Title="New" to bigger size and color, i did apply with CSS but it doesnt works :(
<style type="text/css">
#g_523a7cea_3249_4ac1_b2bc_48efea016ad1
{
color: Blue;
}
</style>
<WebPartPages:DataFormWebPart runat="server"
Description="" ListDisplayName="" PartOrder="2"
Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True"
AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True"
DataSourceID="" Title="News" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True"
DisplayName="Employee News" PageType="PAGE_DISPLAYFORM" FrameState="Normal"
PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default"
DetailLink="" ShowWithSampleData="False" ListId="645a16cc-7fe6-4247-9800-2170e1479074"
ListName="{645A16CC-7FE6-4247-9800-2170E1479074}" FrameType="Default" PartImageSmall=""
IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False"
AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId=""
InitialAsyncDataFetch="False" CssStyleSheet="" MissingAssembly="Cannot import this Web Part."
HelpMode="Modeless" ListUrl="" ID="g_523a7cea_3249_4ac1_b2bc_48efea016ad1"
ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True"
IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{A7755E5E-BE3F-4415-A163-BAA925625A0E}"
__AllowXSLTEditing="true" WebPart="true" Height="" Width="">
The ID is for the DVWP. There is no style that you can apply to a whole DVWP in one fell swoop. Inside the DVWP there will be lots of other CSS classes for the different elements and they will be applied, overriding anything, even if you could use the web part ID for a CSS format.
A DVWP typically displays in a table. There are different classes and styles for TH, TR, TD and so on. If you want to change the appearance, then you need to tackle these classes for the table elements.
replace script with style. script is for javascript. style is for css
<style type='text/css'> ... </style>
Render the page and see what ID you have in your HTML code, then apply the CSS. I'm almost sure that the ID is different, and that's why it doesn't work (happens almost everywhere, where web controls are being used, especially in ASP).
I use PrimeFaces 1.1 with JSF 1.2.
I need to change the style of PrimeFaces <p:lightBox> overlay that has a black border to blue, but the style attribute of the component don't change the overlay, but only the link from which the lightbox is been called.
<p:lightBox width="50%" height="25%"
style="border: 5px; border-style: solid; border-color: blue;">
<h:outputLink value="#" title="Leo Messi" >
<h:outputText value="The Messiah"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/images/barca/messi.jpg" />
<h:outputText style="color:#FFFFFF"
value="Messi is an unusual player. He is highly creative, and has the skills to take on defenders with ease. He is a versatile left-footed player who can play either in the middle or on either wing, or even as a centre forward.
Although he is quite short, he is so fast and physically strong that he can cope with larger opponents. He is incredibly powerful, and a specialist in such dead ball situations as corners, free kicks and penalties.
Leo Messi is cool-headed and able to assume several responsibilities in times of need. He is a player who is destined to have a very successful career in football."></h:outputText>
</h:panelGrid>
</f:facet>
</p:lightBox>
If I am not wrong that is the <a> tag generated. I don't know if you can add any attributes to lightbox's <div>.
I don't have your HTML code generated, but you can do this:
Use Google Chrome to inspect lightbox (right click on lightbox and inspect element) to view <div>'s class.
Add a new "onclick" attribute to <a> and using javascript restyle the elements...
But you should modify primefaces's css from the jar file... I don't find the javascript method elegant...
i have a submit button with the code inside a form
<li>
<input id="zip" name="zipcode" type="submit"
class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>
.zip-button{
height:30px;
------}
.zip-button:focus,.zip-button:hover{------}
for some reason the zip is not getting any style.but if manually add it in jquery like
$("#zip").css({"height":"30px",...});
its working.As am very new to styling i couldn't figure it.
Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code.
It shows, how the browser interprets the style sheets.
Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.
inline:
<input style='height:30px;' ...
style tag:
<html>
<head>
<style type='text/css'>
.zip-button{ height:30px; }
</style>
...
external file
sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]
I've not seen a useful, authoritative web resource which says how to reliably enable rollover effects on a4j:commandButton elements in RichFaces JSF content.
I have found plenty of css resources re buttons, but then when they start talking about html I start wondering what the equivalent is in more recent web technologies.
Basically I want my buttons to look different on hover and then on click. I'd like to use images but client side js is out of scope for this q.
m
Use the following attributes as in this example below to your a4j:commandButton (have a look at the full list (v3.3.1.GA)):
<a4j:commandButton value="Submit" styleClass="ctlBtn"
id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
reRender="allMyOtherplaces"
onmouseover="this.className='ctlBtn btnHover'"
onmousedown="this.className='ctlBtn btnDown'"
onmouseup="this.className='ctlBtn'"
onmouseout="this.className='ctlBtn'"
onclick="this.className='ctlBtn btnDown'"
oncomplete="this.className='ctlBtn'" />
And create classes ctlBtn, btnHover and btnDown in your included .css file.