I want to do a margin style for mat-slide-toggle-bar which is in a specific parent element mat-slide-toggle with class name parent-element.
Here my Html:
<mat-slide-toggle _ngcontent-ng-cli-universal-c397=""
class="parent-element mat-slide-toggle parent-element mat-accent mat-checked mat-disabled ng-untouched ng-pristine"
ng-reflect-form="[object Object]" id="mat-slide-toggle-1"><label class="mat-slide-toggle-label"
for="mat-slide-toggle-1-input">
<span class="mat-slide-toggle-bar">
<input type="checkbox" role="switch" class="mat-slide-toggle-input cdk-visually-hidden"
id="mat-slide-toggle-1-input" tabindex="-1" disabled="" aria-checked="true">
<span class="mat-slide-toggle-thumb-container">
<span class="mat-slide-toggle-thumb"></span>
<span mat-ripple="" class="mat-ripple mat-slide-toggle-ripple mat-focus-indicator"
ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="true" ng-reflect-centered="true"
ng-reflect-radius="20" ng-reflect-animation="[object Object]">
<span class="mat-ripple-element mat-slide-toggle-persistent-ripple"></span>
</span>
</span>
</span>
<span class="mat-slide-toggle-content"><span style="display: none;"> </span> text</span></label>
</mat-slide-toggle>
What I did in style file but dosn't work :
.parent-element .mat-slide-toggle-bar {
margin-left: 80px;
}}}
You can try this:
.mat-slide-toggle-bar {margin-left: 80px !important;}
!important will take precedence over most other rules.
The first answer to the linked question gives more details about it:
What is the order of precedence for CSS?
I solved it by this code in the scss of my parent component :
.parent-element .mat-slide-toggle-bar {
margin-left: 20px !important;
}
Related
I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the left-side-bar, however, since the content is dynamically generated, the background-color is changed to all divs.
#left-side-bar div:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
The :first-child selector is intended, like the name says, to select the first child of a parent tag.
But in your example there is a tag as a parent element on the div. So if you apply nth-of-type to it, you will solve your problem. So this example will work as follows.
#left-side-bar a:nth-of-type(1) .card-sb {
background:red;
}
#left-side-bar .card-sb:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
Add an Id to your div, then refer to it to change the attribute of that specific element.
<div class="card-sb" id="CardSb">
then refer to it in your style sheet:
#CardSb {background-color: #e50914}
or try this:
/* Selects every first element among any group of siblings */
#left-side-bar a:nth-child(1n) {color: #e50914;}
I have an input-group as follow:
<div class="input-group" style="width:100%;"> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a> </div> </div>
I need the last button to have a fixed width, how to do that?
You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.
You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.
Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.
.input-group-btn:last-child {
width: 100px; // or whatever your desired width is
}
You can also do this with flex
.input-group {
display: flex;
}
.input-group-btn {
flex-grow:1;
}
.input-group-btn:last-child {
flex-grow: 0;
flex: shrink:0;
flex-basis: 100px; // or whatever your desired width is
}
If you want to apply the fixed witdh to the second button then it would be
.input-group-btn:nth-child(2){
width: 100px; // or whatever your desired width is
}
Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.
.input-group-btn.fixed-width {
width: 100px; // or whatever your desired width is
}
Having a span containing an ng-repeat I was wondering if it is possible to apply a CSS class to all but first elements of it.
For example,
<span ng-repeat="row in element.Parameters track by $index" class="awesome-css-class">
{{element.Parameters[$index]}}
</span>
My CSS class is
.awesome-css-class {
margin-left: 10px;
}
I tried with this method but apparently it doesn't work
.awesome-css-class ul:not(:first-child){
margin-left: 10px;
}
Any suggestions?
try this:
<span ng-repeat="row in element.Parameters track by $index" ng-class="{ 'awesome-css-class': $index != 0 }">
{{element.Parameters[$index]}}
</span>
You added a wrong ul in your syntax:
.awesome-css-class:not(:first-child) {
margin-left: 10px;
}
<div class="awesome-css-class">Element</div>
<div class="awesome-css-class">Element</div>
Apply the class only to the first element:
https://docs.angularjs.org/api/ng/directive/ngClass
<span ng-repeat="row in element.Parameters track by $index" ng-class="[$index===0 ? 'awesome-css-class' : '']">
{{element.Parameters[$index]}}
</span>
Alternatively, use pure CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child
.awesome-css-class:first-child
{
background:red;
}
.awesome-css-class:not(:first-child) is what you want.
This will select all element with class .awesome-css-class except those which are first child
.awesome-css-class:not(:first-child) {
color: red;
}
<span class="awesome-css-class">1111</span>
<span class="awesome-css-class">2222</span>
<span class="awesome-css-class">3333</span>
<span class="awesome-css-class">4444</span>
<span class="awesome-css-class">5555</span>
I have
<li class="item itemshad edited">
<div class="itemsetting" style="">
<span class="icon"><i class="icon-home"></i></span>
<span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
</div>
</li>
<li class="item itemshad edited selected">
<div class="itemsetting" style="">
<span class="icon"><i class="icon-home"></i></span>
<span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
</div>
</li>
if the "li" has a class of the selected and edited to change the thickness of the border in input.
if that's so
.selected .edited input {
border: 2px dotted #ccc;
}
Does not work
To specify multiple classes on a single element, just join them together:
.selected.edited input
This is because the space character is a combinator that means "any descendant of"
Do this:
.selected.edited input
Removed the space character. Otherwise .edited has to be inside .selected.
It Should be
.edited.selected input {
border: 2px dotted #ccc;
}
For more info on Multiple Class / ID and Class Selectors - http://css-tricks.com/multiple-class-id-selectors/
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.