I want to display blank value onload of h:selectonemenu without adding blank item in dropdown list. But i am not able to get it.
I tried with a few scenario by adding display:none but to no avail.
I even tried adding css but it too didnt work.
Please find the below code:
<h:selectOneMenu
id="testid" style="width:22%;" maxlength="29"
value="#{myVal.val}" >
<f:selectItem itemLabel="" itemValue="" style="display:none;"/>
<f:selectItems
value="#{myController.animalsData}" var="data" itemLabel="#{data.animalName}"
itemValue="#{data.animalCode}" />
</h:selectOneMenu>
I have entered a code, here is the code
<h:commandButton action="#{loginBean.Onay}" value="GİRİŞ" styleClass="button">
<f:param name="yetkiID" value="#{loginBean.yetkiID}" />
</h:commandButton>
The problem is that it doesn't show my css text called button. And when I clicked with ctrl on to "button" show me all css classes with red Unrelated text.
Here is the image from my problem
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
can any one advice on adding a space between a radio button and its label.
do we have any attributes in f:selectItem for doing this
I have to align the radios to the other components of the page. My Labels are aligned but to align the radio, I need to put some space between it and the labels.
I am unable to find any attribute to help me in this.
Please help.
Here is how I recently did this, using primefaces:
<p:column headerText="Is your hair naturally blonde?" width="140">
<p:selectOneRadio value="#{mybean.haircolor}" id="haircolor" layout="custom">
<f:selectItem itemValue="true" />
<f:selectItem itemValue="false" />
</p:selectOneRadio>
<p:panelGrid columns="2">
<h:panelGroup>
<p:radioButton id="hairColorYes" for="haircolor" itemIndex="0"/>
<h:outputLabel for="hairColorYes" value="Yes" styleClass="radiolabelPF"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="hairColorNo" for="haircolor" itemIndex="1"/>
<h:outputLabel for="hairColorNo" value="No" styleClass="radiolabelPF"/>
</h:panelGroup>
</p:panelGrid>
</p:column>
and then my one CSS style:
.radiolabelPF {
margin-left: 5px;
}
The trick was to use layout="custom" in <p:selectOneRadio>. My actual radio buttons and labels are within the <h:panelGroup> tags.
This was the only way I could control the space between the radio label and button in Primefaces. It's also documented in the "custom layout" section of the documentation on selectOneRadio.
http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
Please use CSS styles for this task - please see this tutorial for examples
I have a p:selectOneMenu in xhtml. But the list is not displaying properly. The list have near to 70 items. When I click on the selectOneMenu, the list populate upwards instead without scrollbar and I can't see all the items.
<td valign="top"><p:selectOneMenu id="fr1022_combo_box_ctpy"
value="#{pc_Fr1022.w_facility.ctpy}" styleClass="selectOneMenu">
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}"></f:selectItems>
</p:selectOneMenu>
</td>
I believe the way you have used f:selectItems is incorrect.
It should be
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}" var="facility"
itemLabel="#{facility.name}" itemValue="#{facility.value}" />
HTH
The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in the form.
Internet Explorer (IE) highlights the first button in the form when the form has focus by adding a proprietary border or something. Other browsers do not add such a visual clue.
I'd like to use another button as the default and style this button so all browsers will provide a visual clue that it is the default button. (We're using ASP.NET which uses one form per page, and so it's hard to design the pages so that the default button always comes first.)
While I can easily accomplish this with javascript and css in most browsers, I'm having trouble making IE stop highlighting the first button.
Is there any way to tell IE to NOT highlight the first submit-button or to highlight a different button? Or is there some other solution that I've missed?
On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.
ASP.Net 2.0 also introduced the concept of DefaultButton.
This is available on atleast Form and Panel elements:
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
<br />
<br />
<asp:panel id="something" defaultbutton="button3" runat="server">
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
<br />
<asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />
</asp:panel>
<br />
<br />
</div>
</form>
So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.
This is powered by an onkeypress method created by ASP.Net.
When the page loads, IE and Firefox both highlight Button2 (as you want).
If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.
Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.
This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>
But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).
Other than replacing them with image buttons, I'm not sure what else I can suggest.
One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.
Feels dirty though. Any better ideas?
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you are using .Net 2 this may help you
...Use the DefaultFocus property to
access the control on the form to
display as the control with input
focus when the HtmlForm control is
loaded. Controls that can be selected
are displayed with a visual cue
indicating that they have the focus.
For example, a TextBox control with
focus is displayed with the insertion
point positioned inside of it. ...
What about defining a particular CSS style (or class) for this button ?
<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>