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
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 want to change the color of my 'check out' button to orange in my cart page.
I have tried the following:
<button type="submit" style="width: 100%" name="checkout" class="btn"
style="background-color:#FFA500">{{ 'cart.general.checkout' | t }}</button>
However, the color remains blue (which is the overal color theme of my website).
Does anyone see an error in the above html code or would have a clue why the above color code is overriden?
BTW, I have managed to change other buttons on other pages of my website using the abovec code.
Many thanks.
Best regads,
You can define style attribute only once in your html and add as many CSS properties in that style attribute as you want
<button type="submit" style="width: 100%; background-color:#FFA500"
name="checkout" class="btn">{{ 'cart.general.checkout' | t }}
</button>
You should not put all the styles in several attributes.
Put all the css properties of element into one style tag separated by ";":
style="width: 100%; background-color:#FFA500"
Of course would not recommend to do it inline (inside html tag), but to assign CSS properties to a id (unique) or class (same type of elements) in .css file which should be included in head tag
HTML:
<button type="submit" style="width: 100%;background-color:#FFA500" name="checkout" class="btn checkout">{{ 'cart.general.checkout' | t }}</button>
CSS (styles.css) :
.checkout{
width: 100%;
background-color:#FFA500;
}
I have a plugin (intro-js) for creating an introductory tour containing a opaque overlay with spotlights on my page divs.
Using the following css rules I try to bring up the element within class introjs-showElement above all other elements.
How can it show the element in css like my desktop browsers? Currently I only see a white box in my css.
.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
z-index: 99999998 !important;
}
.introjs-showElement>* {
-webkit-transform: translateZ(1px) !important;
}
HTML Sample of Div Text and Toggle Buttons not showing up (all exist in a fixed header scrollable angular angular datatable plugin)
<td class="td-nopadding ng-enter-fast ng-leave">
<div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
<div class="text-input">
<input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
</div>
<div class="inc-dec-buttons">
<button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
<span class="glyphicon-plus"></span>
</button>
<br>
<button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
<span class="glyphicon-minus"></span>
</button>
</div>
</div>
</td>
This is a known issue with the library:
https://github.com/usablica/intro.js/issues/532
https://github.com/usablica/intro.js/issues/507
https://github.com/usablica/intro.js/issues/401
https://github.com/usablica/intro.js/issues/123
...to name a few.
The issue is the stacking context and the way that introJs makes elements appear on top:
The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).
So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.
So I am relatively new to front-end development, and I am going back and cleaning up a bunch of my code which has a lot of in-line styling. What I am trying to figure out is the appropriate way to apply multiple CSS class selectors, or ID selector to a single HTML element. I attempted at creating a single class selector. What is the correct way of applying multiple classes or ID's to a single element... Please note that that they need to be separate in CSS as they have dofferent properties.
Custom Class Selector:
#customModal .modal-open .modal{
overflow: visible;
}
#customModalDialog .modal-dialog{
position: fixed;
left: 60%;
}
Example CSS:
<style>
.modal-open .modal {
overflow: visible
}
.modal-dialog {
position: fixed;
left: 60%;
}
</style>
HTML to be applied to:
<div class=" bg-white" modaldraggable>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<div class="modal-title">{{alert_data.title}}</div>
</div>
<div class="modal-body" style="height: 319px">
<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-info btn-xs" ng-click="cancel()">Ok</button>
</div>
</form>
</div>
********* Note**
I am trying to overwrite a bootstrap class selector for a very unique template... by doing .modal{} in main.css I would overwrite them all... thats why I need a custom selector to handle both.
Out of general good coding habits, it's always better to apply css on an element with classes like so:
.red{
background-color: red;
}
.outline{
border: 2px #000 solid;
}
<div class="red outline"></div>
The classes in the element are separated with spaces and the last one is the most important class (can override some css properties if needed)
The main goal of this is to make sure you code is sustainable, if you want to add a new element with the same properties to your page, you don't need to re-write some css.
About IDs:
Use only one ID on an element, it should only need one, and this id should be unique throughout the document, this will be more important than css properties given with class.
I also recommend this article to further your knowledge on the matter.
Enjoy front-end!
To apply multiple classes to an element just write it like this (i.e. without comma):
<div class="class1 class2 class3">...</div>
To mix classes with an ID, write
<div id="element1" class="class3 class4">...</div>
I am working on creating a simplified bespoke framework for structuring forms by only adding or removing html elements and without using classes or JavaScript.
After days of work, below is a demonstration of what I manged to do so far:
The only problem I am experiencing is highlighted in yellow circles above.
I simply can't get the input/textarea which is followed by an <i> or <a> to keep its original border-radius, which is set to 4px in this line of CSS:
/*(?) Form elements global border-radius settings*/
input, textarea, select, .select-input, fieldset > div > span,fieldset > div > a {
border-radius: 4px;
}
The full HTML and CSS which used to show the image above can be found in this JSFiddle here: http://jsfiddle.net/kvezedo5 - I have also uploaded a live version of the framework shown in the image above here: http://loai.directory/test
The HTML for the elements in question are below:
<fieldset>
<div>
<input name="">
<i class="icon-question tooltip-top" title="Text Goes Here"></i>
</div>
</fieldset>
<fieldset>
<div>
<input name="">
<a>Button</a>
</div>
</fieldset>
The culprit is this:
fieldset > div > *:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
You should change that to use a class so it doesn't clobber everything. This is the reason global selectors aren't usually recommended:
fieldset > div > .sharpcorners