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;
}
Related
There is a dropdown menu in our web app which height I would like to change. I looked at the source code I'm my Browser and was able to change it via hard coding. Now I would like to implement those changes in the real code. We have a main.scss file which stores all our styles. I created a style which should change the height, but it doesn't seem to work. I guess my CSS selector reference is wrong or something.
<div class="rf-au-lst-dcrtn ">
<div class="rf-au-lst-scrl">
<div id="test-main-form:account:name">
<div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp" style="width: 39px;"></div>
<div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp" style="width: 39px;"></div>
<div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp" style="width: 39px;"></div>
main.scss:
.rf-au-itm rf-au-opt rf-au-fnt rf-au-inp{
height: 18; }
There is an error in your css syntax:
.rf-au-itm rf-au-opt rf-au-fnt rf-au-inp{
height: 18; }
a className should always be preceded by a '.'
when you want to select an element having a set of classes .clas1.class2
So the proper syntax would be :
.rf-au-itm.rf-au-opt.rf-au-fnt.rf-au-inp {
height: 18px; /* added px, as it is required to specify the unit (unless the value is 0) */
}
To see possible selector in css : https://www.w3schools.com/cssref/css_selectors.asp
I am using a CSS library that relies on Less. In order to override the CSS properties of a certain element I am trying to use the higher degree of specificity technique by wrapping a parent element "commentPaddingFix" as so:
<div class='commentPaddingFix'>
<div class='Child1'>
<div class='Child2'>
<div class='ant-comment-inner'>
</div>
</div>
</div>
</div>
And in the Less file:
.commentPaddingFix {
.ant-comment-inner {
padding-bottom: 0px !important;
padding-top: 0px !important;
}
}
I need a solution that works when you know the className of the element you are targeting for any arbitrary number of nested parent elements. I can't use nth child technique as the children numbers vary from render to render.
I don't know Less but if that works anything like Sass your solution should work.
Here's what it looks like with pure css: https://codesandbox.io/s/condescending-bhaskara-3781k.
I would change the style of p-inputSwitch component of Primeng library
I would get something like this:
Here's my code :
<div class="contner">
<div class="toggle-area">
<p>SEARCH BY</p>
<div >
<p class ="toggle-inline">Business group</p>
<div class="toggle-btn toggle-inline">
<p-inputSwitch [(ngModel)]="checked"
onLabel=""
offLabel=""
styleClass="ui-inputswitch"
></p-inputSwitch>
</div>
<p class="toggle-inline">Borrower</p>
</div>
</div>
I started by deleting labels but width changes also and I don't know how to increase it
I started by deleting labels but width changes also and I don't know how to increase it
Override PrimeNG ui-inputswitch class :
.ui-inputswitch {
width: 80px !important;
}
See Plunker
you can replace your div element with following
<p-toggleButton onLabel="Business Group(s)" offLabel="Borrower(s)"
onIcon="fa-toggle-on" offIcon="fa-toggle-off" [(ngModel)]="checked"></p-toggleButton>
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 using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows :
<div id="rt-page-surround">
<div class="rt-container">
<div class="rt-container-bg">
<div id="rt-drawer">
<div id="rt-header">
<div class="rt-grid-6 rt-alpha">
<div class="rt-grid-6 rt-omega">
<div class="thumbnail_scroller">
<div class="rt-block">
<div class="module-content">
<div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
<div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
</div>
The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.
I have tried
.thumbnail_scroller {padding:0px !important}
but this seems to do nothing, anyone any ideas on this one ? :-)
div.thumbnail_scroller div.rt-block {
padding:0;
}
This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.
You can be hyper-specific by trying something within your CSS like:
div.thumbnail_scroller div.rt-block {
padding: 0px;
}
That directive will then apply only to a div of class thumbnail_scroller IF it sits within a div container of class rt-block.
(Edited for div order - re-read your question.) {:¬)