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.
Related
I'm trying to style this button with CSS. It's used on a Cart Page and other areas throughout the site. On the cart page its "name" element is unique name="calc_shipping". However, because the class is not unique if I try to style it using the current class it naturally changes the style of all similar buttons.
Question: Is it possible to somehow use the name="calc_shipping" element in my CSS modification to style this button specifically?
<button type="submit" name="calc_shipping" value="1" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
Thanks for any suggestions! I've been racking my head on this for hours.
ch
You can simply add an ID to this specific button. I'll for example use ID "calc_shipping_btn"
<button type="submit" name="calc_shipping" value="1" id="calc_shipping_btn" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
The CSS for this would be:
#calc_shipping_btn {
background-color: #00FF00;
color: #FFF;
}
If you don't want to add an ID you can target this specific button with this CSS:
button[name="calc_shipping"] {
background-color: #00FF00;
color: #FFF;
}
Add !important after every rule if they refuse to style the element. This helps override the class' css.
if your button has unique parent section as div or span for example parent-section class you can add style to button this example
.parent-section button{
...
}
I would like to set different colors depending on whether the div is collapsed or expanded.
For example: If some section is collapsed, I want to set the background color of my button and header color <h2> to be more muted (to be specific rgb(115, 129, 184);), and when the same section is expanded I want them to be set to my primary color (rgb(54, 74, 153);).
Here's my HTML file:
<section id="category">
<div class="d-flex justify-content-between align-items-baseline">
<h2>Category</h2>
<button class="btn section-dropdown-btn float-right" type="button"
data-toggle="collapse" data-target="#categoryitems" aria-expanded="false">
<i class="dropdown-expanded fa fa-angle-down"></i>
<i class="dropdown-collapsed fa fa-angle-up"></i>
</button>
</div>
</section>
And my CSS (based on this thread: https://stackoverflow.com/a/42291535):
.section-dropdown-btn[aria-expanded=false] .dropdown-collapsed{
display: none;
}
.section-dropdown-btn[aria-expanded=true] .dropdown-expanded{
display: none;
}
.section-dropdown-btn[aria-expanded=false]{
background-color: rgb(115, 129, 184);
}
.section-dropdown-btn[aria-expanded=true]{
background-color: rgb(54, 74, 153);
}
But I don't feel like this is a great and clean solution. Also, only button has that aria-expanded attribute, so my <h2> tag can't easily determine if it's collapsed or not. I would also have to make many similar CSS rules, about one class just to change one attribute.
How can I achieve that and how could I avoid repetitiveness?
Bootstrap puts collapse and show classes on the element when it does its thing. You should be able to target those with your CSS selectors. That doesn't help with your parent element problem, but it's cleaner than using the ARIA attribute.
For the parent selector you can use the available events. Write a function something like this, with a similar inverse function for hide:
$('.item-wrapper').on('shown.bs.collapse', function () {
$(this).closest('h2').addClass('blah');
});
Then you'd use your custom class for all CSS inside that element.
I have the following button in html code:
<button type="button" id="acp-toggle-toolbar" class=" toolbar-left" style="top: 25px;"><img src="https://apostolosloukas.org/wp-content/plugins/accessible-poetry//assets/icons/access.svg" alt="Accessibility Icon"></button><div id="acp-black-screen"></div> <style>#acp-toggle-toolbar{top:25px;}</style>
<div id="acp-toolbar" class="acp-toolbar acp-toolbar-skin-1 toolbar-left" aria-hidden="true">
<button id="acp-close-toolbar">
<span class="sr-only">Close the accessibility toolbar</span>
<span class="acp-close-icon" aria-hidden="true"></span>
</button>
I need to move the button down.
I tried the following with no luck.
.toolbar-left img:style {
top: 105px;
}
My website is https://apostolosloukas.org/ and it's the accessibility button on the upper left.
You have inline-css that says: top: 25px, this is overriding your class code. In order to fix this, remove the inline css.
You can also add !important, in your class code.
You can use !important to override inline styles:
.toolbar-left {
top: 105px !important;
}
This is widely considered bad practice and should only ever be used in situations where no other way of solving the problem is available.
On top of that, the current top: 25px affects the surrounding button, not the img.
The other issue is that there is no pseudo selector :style in CSS. Just get rid of it.
This is the result of my suggestion:
This is my angular template code:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The class "pointer-cursor" is plain simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
The z-index was only added for trying if it could make some difference, but it doesn't. I also tried applying this class to other parts like the wrapper div and so, but it's just not working. I keep seeing the normal "text cursor" instead of the pointer one...
Does anybody know why this happens?
Try that
::ng-deep .pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
Edit
The ::ng-deep combinator (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) ensures that the defined style applies to all child elements of the component, not only elements directly created by the component.
Since the element you want to style in inside a ng-template tag (so it does not belong directly to the component), you need to use this to style its elements
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>