I want to change the font-size of the text in a tab.
This does not work:
<zk>
<style>
.xxx {
font-size: 28px;
}
</style>
<vlayout style="padding:20px">
<tabbox width="100%">
<tabs>
<tab label="Tab 1" sclass="xxx"/>
<tab label="Tab 2"/>
<tab label="Tab 3"/>
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 1</tabpanel>
</tabpanels>
</tabbox>
</vlayout>
</zk>
What am I doing wrong?
If you have to have this then you can achieve it by doing the following
.xxx * {
font-size: 28px !important;
}
now use sclass="xxx" on tabpanels to apply instead of tab as the content goes into tabpanels.
Using .xxx * means this css class will be applied to the tabpanels as well as all children component. Also !important is required to override any font-size settings used by children components
Note: This way of overriding is NOT recommended as most components rely on their own css settings for consistent look & feel as well as behavior across all browsers
Related
This is my following code for formcommon.razor
<MudItem xs="12" md="3" Style="margin-top: 15px!important;margin-left: -70px!important;">
<MudTooltip Text="some tooltip">
<MudButton Variant="Variant.Filled" Class="button-min-width" Color="Color.Primary">?</MudButton>
</MudTooltip>
</MudItem>
this works perfectly as the margin-left is -70px.
but when i move these to .css files which is formcommon.razor.css
.marginIn {
margin-top: 15px!important;
margin-left: -70px!important;
}
and change this formcommon.razor to
<MudItem xs="12" md="3" Class="marginIn">
<MudTooltip Text="some tooltip">
<MudButton Variant="Variant.Filled" Class="button-min-width" Color="Color.Primary">?</MudButton>
</MudTooltip>
</MudItem>
the output is different.the margin-left is NOT -70px.
Am i missing anything?
This is expected behavior. Notice that you are not applying any class to your component through the normal class attribute. In MudItem, Class is a component attribute, not an HTML attribute.
One solution would be to wrap your MudItem in a div container:
<div class="marginIn">
<MudItem />
</div>
I have a question about adding styles to Angular components.
e.g I would like to have every second angular component in a list to have red background-color.
How can I make it happen?
I tried a lot of different things - it seems that it is added in HTML but doesn't work.
<ang-component class="someClass" />
<ang-component class="someClass" />
I tried setting it in parent component styles
ang-component:nth-child(odd) {
background-color: red;
}
but it doesn't work. It shows up while inspecting but there is no visible effect
EDIT: Code - to show an example how it looks
<form [formGroup]="form" class="someParentClass" (ngSubmit)="onUpdateForm()" >
<item></item>
<hr />
<item></item>
<item></item>
<hr />
<div id="btn-save-section">
<button class="cancel-btn" type="button">Cancel</button>
<button class="update-btn" type="button">Update</button>
</div>
I want item components to change - so every second should have background color red
ang-component:nth-child(odd) > * {
background-color: red;
}
because your component root element is probably only a container w 0 width and 0 height
I am very new to html and css , I have used angular-tabs-component for creation of tabs,so now i want to change background color of tab..can some one suggest me how to do.here is my code...
HTML:
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live">
</tab>
</tabs
Add class tab to tab tag-
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live" class="tab-background">
</tab>
</tabs
and then in the css of that component add -
.tab-background {
background-color: red;
}
How can I change properties of component using CSS?
Let's say I have two buttons:
<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">
I want all my buttons to have font-size: 14px; so I added this rule:
.ui-button .ui-button-text{
font-size:14px;
}
But my smallButton should have different size, so I added:
.smallButton{
font-size:11px;
}
Unfortunatelly this doesn't work. This is produced HTML:
<button class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only smallButton" (...)>
<span class="ui-button-text ui-c">MY TEXT</span>
</button>
The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?
Your problem is related to the loading order of all the CSS. CSS are cascading style sheets. So if you want your .smallButton style to be applied, it must be the last in the css chain, in order to override any previous matching styles.
Check the order of the CSS (see generated source header in your browser)
If you want your CSS to be the last one, you can use this inside your page or template:
<f:facet name="last">
<h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>
This avoids overuse of !important tag, that works either.
EDIT
This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.
<style>
.ui-button-text{
font-size:14px;
}
.smallButton .ui-button-text {
font-size:11px;
}
</style>
<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>
Also, please notice that the generated html buttons do not have any ui-button class.
I found the solution to my problem. All I need is this:
.smallButton.ui-button-text-only .ui-button-text {
font-size: 11px;
}
So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.
PrimeFaces overrides your css with the default rules for the parent form.
You can define your css for the form like this:
form .smallButton{
font-size:11px;
}
or you can use the !important keyword:
.smallButton{
font-size:11px !important;
}
See also:
PrimeFaces: how to override CSS class
PrimeFaces overrides my custom CSS style
i'm trying to customize the whole style of the component, and hide the selector image. All graphics style such border, shadows are setted in the previous table. Now i want to remove all style from the selection menu such as the horrible icon to select an item
My original code in jsf:
<h:panelGrid class="dropDown">
<h:selectOneMenu value="#{myBean.selected}"
id="list" class="test" style="border-style:none; height:31px;">
<f:selectItems value="#{myBean.list}" var="item"
itemLabel="#{item.name}" itemValue="#{item.code}" />
<f:ajax execute="#this" />
</h:selectOneMenu>
</h:panelGrid>
This is my style for class .test
.test{
background-color: white;
clear: both;
color: black !important;
font-family: Helvetica !important;
font-size: 16px !important;
height: 30px;
margin-bottom: 0;
border-style: none;
}
My page rendered in html:
<select id="list" name="item" class="test" size="1" style="border-style:none; height:31px;"onchange="jsf.util.chain(this,event,'disableBox()','mojarra.ab(this,event,\'valueChange\',\'#this\')')">
<option value="1">al</option>
...
<option value="22">re</option>
</select>
But when i open the webpage from a webview (Android) I still see the icon .
Is it impossible to remove if I'm on a simple Webview? Or what element should I use to remove it? Or, it's another component I could use?
My idea is to hide the icon and allow a user to click on the single line, then the Android original component drop down list is opened.
I know that it's styled by the operating system.. any suggestion?
I think it's not usefull.. but I created a simple jsfiddle page where I can test css style modifications.
jsfiddle
The standard JSF html renderkit will render an h:selectOne as a simple html select tag with you f:selectItems becoming the child option tags.
<select>
<option value="a">a</option>
<option value="b">b</option>
</select>
so your question is really is there a way to remove the icon from an html select tag. It really has nothing to do with JSF.
Once you've figured out how to write the html and cssto get the effect you want, you can then write a custom renderer to reproduce that html.
Found a working solution with custom css:
Since the component jsf is rendered as , we include all elements inside a , or in this case inside a
<h:panelGrid class="parent dropDown">
<h:selectOneMenu value="#{myBean.selected}"
id="list" class="test" style="border-style:none; height:31px;">
<f:selectItems value="#{myBean.list}" var="item"
itemLabel="#{item.name}" itemValue="#{item.code}" />
<f:ajax execute="#this" />
</h:selectOneMenu>
</h:panelGrid>
adding the class parent to the panelGrid and defining:
.parent{
width:98%;
overflow:hidden;
}
.parent select{
width:100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
}
Our jsf component is rendered without the arrow and other components, like borders and shadows.
custom style select using only html and css not any js/javascript
`http://jsfiddle.net/suyogN/39tx46L3/`