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>
Related
I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
I have this css code for an Angular mat-group-button
mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
This is the generated code
<mat-button-toggle-group _ngcontent-sah-c203="" role="group" name="os_attribution" aria-label="Atribuição de OS"
class="mat-button-toggle-group mat-button-toggle-group-appearance-standard" ng-reflect-name="os_attribution"
aria-disabled="false">
<mat-button-toggle _ngcontent-sah-c203="" value="anyone"
class="mat-button-toggle mat-button-toggle-appearance-standard" ng-reflect-value="anyone" tabindex="-1"
id="mat-button-toggle-2"><button type="button" class="mat-button-toggle-button mat-focus-indicator"
id="mat-button-toggle-2-button" tabindex="0" aria-pressed="false" name="os_attribution">
<div class="mat-button-toggle-label-content">
<mat-icon _ngcontent-sah-c203="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color"
aria-hidden="true">assignment_turned_in</mat-icon>
Atribuídas
</div>
</button>
</mat-button-toggle>
</mat-button-toggle-group>
I am able to change the style of the elements until this selection
mat-button-toggle-group mat-button-toggle {
background: red;
}
But after that, when I reach button, nothing I've tried works
What's happening ?
I suppose you're using angular right?
In this case the problem is about view encapsulation.
If you check the generated styles, you notice that they are scoped to the parent components assigned ID.
To opt out of the view encapsulation you can use the ::ng-deep selector.
::ng-deep mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
You forgot to use the CSS class selector .!
.mat-button-toggle-group .mat-button-toggle {
background: red;
}
If any of those are angular components, you cannot be sure that they will build into the same HTML tag names. Its better to use classes if it involves non-standard tag names (stuff that isn't button, div, span, etc).
mat-button-toggle is missing the period. Needs to be .mat-button-toggle.
I have a problem. In my web project I use css. In some moments I want to restart inheritance form the parent class.
I have some classes which define my styles, but I want to reset all style without hover.
When I use reset in this way:
<a id="hrefSite" href="{{route('about') }}"><i style="all: unset; font-size: 150px;" class="conf conf-ui"></i></a>
It works, but when I add color: #868e96; in style inline, the hover dosn't work.
These two classes conf conf-ui must stay because there I load the google, fb, etc icons.
I tried write another class to do it:
.newStyle{
all: unset; !important;
font-size: 150px;
color: #868e96;
}
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
but it isn't working correctly. Size is incorrect.
EDIT:
This is my hierarchy in HTML.
<div class="col-md-12 col-lg-4">
<div class="cr">
<div class="cr-block cntr"
<div class="icon">
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
</div>
</div>
</div>
</div>
I found the mistake.
I tried to set style to <i> tag. When I changed it for <div> tag it works.
But now I don't now why.
It's due to that in css I can't set style for <i> tag?
Can someone explain this?
Currently I'm using the progressbar of ng2-bootstrap in the GUI of my website. The HTML which I use for this step is very simple:
<div class="col-lg-8 col-md-4">
<progressbar max="100" class="progress-striped" [value]="progress">{{progress}}%</progressbar>
</div>
This gets rendered into the following HTML:
<div class="col-lg-8 col-md-4">
<progressbar class="progress-striped" max="100">
<div progress="" max="100" class="progress" style="height: 30px;">
<bar>
<div aria-valuemin="0" class="progress-bar" role="progressbar" style="min-width: 0px; width: 0%;" ng-reflect-initial-classes="progress-bar" aria-valuenow="0" aria-valuetext="0%">
0%
</div>
</bar>
</div>
</progressbar>
</div>
I removed some angular directives to improve the readability
The height of the progressbar is set in the second div within the css-class progress, which I can not access, because it is set in the provided source code of the component. Also the innermost div is the one I would need to access if I want to change the font-size.
I tried to override the style in the parent to set the height, but the progress class is more specific and therefore I could not override it.
I found a not very pretty solution which uses ElementRef and Renderer, but this scales very bad and will get messy if there are multiple progressbars(ATM I'm trying to access a second progressbar):
ngAfterViewInit() {
this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div'), 'height', '30px');
this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div').querySelector('bar').querySelector('div'), 'font-size', '15px');
}
Are there better approaches to solve this problem? As last resort I could try to adjust the source code of the component to access both values, but actually I want to avoid this.
You mention specificity as the problem. If that's the case, using !important is a solution. Anything marked with !important will gain top-specificity and cannot be overridden by any other non-!important CSS rule or inline styles.
When put in your global.css file this should work for all progressbars.
It might not work from within your component.css due to view encapsulation.
progressbar > div[progress] {
height: 30px !important;
}
progressbar > div[progress] > bar > .progress-bar {
font-size: 15px !important;
}
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