This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
I have been trying to apply style class to my input text but I am unable to do it .
<h:form id="SearchPageForm">
<br />
<p:outputLabel>Search: </p:outputLabel>
<p:inputText id="search" styleClass="text-input" size="123"
value="${SearchController.employeeBO.employeeID}" />
<h:commandButton value="submit" image="images/search.png"
style="vertical-align: top;" action="#{SearchController.searchOnId}" />
<br />
<br />
This is my HTML and my CSS says
.text-input{
background-color:#fbfbfb;
border:solid 50px #000000;
margin-bottom:8px;
width:750px;
padding:8px 5px;
color:#797979;
}
I did the inspect on the form and I see it is still calling the default CSS of primefaces.
<input id="SearchPageForm:search" name="SearchPageForm:search" type="text" size="123" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all text-input" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
I want to increase the size of Search Form to 750px .
I am new to CSS and HTML so might have missed something .
Regards
To debug the css properties you could use the function "inspect element" that all browsers have, and so you can see if the css properties are being aplied.
Related
This question already has answers here:
Using CSS :before and :after pseudo-elements with inline CSS?
(10 answers)
Closed 3 years ago.
<style>
::placeholder {
color: red;
}
</style>
<input id="date" name="date" placeholder="Please select release date" type="text"/>
this is my css. Is there any way to define this inline ? I mean with style = "" .
With CSS variables you can do like below but you need at least to define the style that you can change later:
::placeholder {
color: var(--c, red); /* The default is red */
}
<input id="date" name="date" placeholder="select date" type="text" >
<input id="date" name="date" placeholder="select date" type="text" style="--c:blue" >
i have this menubar in my project, i'm using PrimeFaces for the first time:
<p:menubar styleClass="sso_header ui-widget-header " style="width:99.5%; margin-top: 3px; border-radius: 10px;" >
<p:menuitem value="Test" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
<p:menuitem value="LOG IN" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
</p:menubar>
I need last menuitem float:right;, at least I tried to include external style in this way:
<h:outputStylesheet name="css/style.css" />
and assign my css class to the menutitem.
I tried inline style whit the !important attribute, nothing works.
After inspect code from browser i noticed that Primefaces assign my style to a <a> inside a <li>.
There is a way to assign float right to that <li> in PrimeFaces?
Thanks in advance.
Check the html code that PrimeFaces is generating and use the css classes to define your styles, for your posted code something like this should work
.sso_header .ui-menuitem.ui-widget.ui-corner-all:last-child {
float: right;
}
How can I set the autoComplete width to fill the panel correctly?
As you can see, using:
.ui-autocomplete input {
width: 100%;
}
will put the arrow out of the panel
EDIT: panelGrid
<p:panelGrid columns="3" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
<p:panelGrid>
<p:outputLabel value="Item name" for="haveName" />
<br/>
<p:autoComplete id="haveName" effect="fade" dropdown="true" forceSelection="true"/>
</p:panelGrid>
<p:panelGrid>
<p:outputLabel value="Paint" for="havePaint" />
<br/>
<p:autoComplete id="havePaint" effect="fade" dropdown="true" forceSelection="true"/>
</p:panelGrid>
<p:panelGrid>
<p:outputLabel value="Certification" for="haveCert" />
<br/>
<p:autoComplete id="haveCert" effect="fade" dropdown="true" forceSelection="true"/>
</p:panelGrid>
</p:panelGrid>
EDIT2: this is what happens when I set style="width: 100%" in the autoComplete tag:
EDIT3: this happens when I combine both:
If someone else is wondering how to achieve a full responsive autocomplete component on:
PrimeNg version: 4.0.3
Angular: 4.0.3
For me the only possible thing on earth that worked was a combination of this styles :
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"
with the following definition of the css:
.p-autocomplete{
width: 100%;
}
Hooope this helps!
In version primeng 11.3.2, you have to combine [style] and [inputStyle]:
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
If you use the attribute [multiple] =" true ", wrap the <p-autoComplete> </p-autoComplete> in a span with the class p-fluid
<span class="p-fluid">
<p-autoComplete class="mdb-autocomplete" field="email" placeholder="Search user"
[(ngModel)]="item_ac" [suggestions]="filterAC"[multiple]="true"
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
(completeMethod)="onCompleteAC($event)"
(onSelect)="onSelectAC($event)" (onUnselect)="onUnselectAC($event)">
<ng-template let-item_ac pTemplate="item">
<div class="div-item-ac">
</div>
</ng-template>
</p-autoComplete>
</span>
It Worked for me this way
.ui-autocomplete{
width: 100% !important;}
.ui-autocomplete-input{
width: 90% !important;}
Use the !important css declaration.
PrimeNG ULTIMA 5.2.0, PrimeNG 5.2.0
Setting the style width for .md-autocomplete when your <p-autoComplete> element is children of an ui-inputgroup
will cause the width being overwritten by the definition body .ui-inputgroup *[class^="md-"].
Take a look how the width in .md-autocomplete gets overwritten (at bottom):
You should make you definition !important Take a look how the width in .md-autocomplete gets not overwritten (at bottom):
And additionally the style attribute of the element p-autoComplete should look like:
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}".
In PF 6.1 <p:autocomplete> has a size attribute for this, setting it to "100%" works for me.
Using the version 13, you can use the fluid class on your span tag like this
<span class="p-fluid"> <p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [multiple]="true"> </p-autoComplete> </span>
then your autocomplete will take the 100% of width
I face some layout differences in IE and in Chrome. I have searched Stack overflow high and low for solutions and tried some of it... I tried setting box-sizing to initial...it did not work...there fore tried setting height of the text box it did work but still a big differences. I also tried changing doctype to strict. I encounter this problem as part of my project.
The Problem:
I have form in a div tag. In the form there are 4 rows of text field. I put the preview on IE and the preview on Chrome side by side to compare and realise that it is the spacing between the text area that causes the differences in height.
The Code on my html file:
<div class="leftdetails">
<form class="form2" name="form2" method="post" action="">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" class="regfields"/>
<br />
<label for="cdsid">CDSID: </label>
<input type="text" name="cdsid" id="cdsid" class="regfields"/>
<br />
<label for="mail">Mail Drop: </label>
<input type="text" name="mail" id="mail" class="regfields"/>
<br />
<label for="dateofbirth">D.O.B.: </label>
<input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
<br />
</form>
</div>
The code on my CSS (external)
.leftdetails
{
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
}
.regfields
{
width:200px;
height:20px;
vertical-align:bottom;
}
.form2
{
text-align:right;
margin-right:50px;
}
This is not published online yet therefore there is not link...but I will be glad to provide screenshot. Its a very minor difference but I just want to understand why.
Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom
Try using a conditional IE statement in your CSS to target only the Internet Explorer browser.
If you don't know how to do so, examples can be found here
How would I align everything in my below to the far right?
<div id="container">
<h:form id="authenticate">
<h:panelGrid columns="5" cellpadding="6">
<h:inputText id="email" value="" />
<p:watermark for="email" value="Email"/>
<h:inputSecret id="password" value="" />
<p:watermark for="password" value="Password"/>
<p:commandButton id="login" value="Login" align="right"/>
</h:panelGrid>
</h:form>
</div>
The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:
#authenticate table td {
text-align: right;
}
You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).
<h:panelGrid styleClass="className">
with
.className td {
text-align: right;
}
You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:
<h:panelGrid columnClasses="className">
with
.className {
text-align: right;
}
As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.
actually in same form i used <p:panel> and got good result. looks like ;
<p:panel styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<p:commandButton value="Add New Tab"
actionListener="#{xxx.createNewTab}" process="#this"
update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
</p:panel>
A little late, but might help someone, as it was what I needed...
If the alignment is not limited to this specific table, but rather the default format for all table cells, then just add this to your CSS file:
td {
text-align: right;
}
Then, all <td> elements, including those generated by JSF, will be formatted that way.