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
Related
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>
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;
}
Icon fonts are an increasingly popular alternative to image sprites for embedding icons in webpages.
One capability of images that I can't find an equivalent for is sizing the icon relative to the container element.
With an image, I could do something like:
<div style="width: 200px">
<img style="width: 100%"/>
</div>
but I haven't found any equivalent for glyph icons. Has anyone found a technique for sizing glyphs relative to the container?
This can't be done with CSS font-size, as the inherited size relating to glyphs is the parents font-size, and not it's box width.
It can be done with Javascript as mentioned here.
Matthew Riches put some code on JSFiddle to demonstrate this. I'm adding it here too so SO also has it:
<div id="container" style="width: 200px; background: #cccccc;">
<span id="container">M</span>
</div>
and some js:
$(document).ready(function() {
var fontSize = parseInt($("#container").height())+"px";
$("#container span").css('font-size', fontSize);
});
I'm using jquery-mobile and I'd like to have the control-elements of my main-view to fill the entire available height and width, like in this picture:
To set the height like:
<div id="ButtonContent" style="height:100%>
<button style="height:50%/>
<button style="height:50%/>
</div>
doesnt work. See
jsFiddle
I also would like to have this div-container to fill the entire space:
Therefore I have this jsFiddle
I tried to set the height of the div-conatiner and it's content to 100%, but that doesn't work.
There are some concepts you have to understand:
The answer from Hiigaran.
Button are inline elements.
This could be what you want:
<div id="ButtonContent" style="height: 500px">
<div style="height: 50%"><button style="height: 100%"/></div>
<div style="height: 50%"><button style="height: 100%"/></div>
</div>
Try on JSFiddle
To my understanding, you can't set height:100%; if you don't have an absolute value height on the parent element. For example, if you have the following HTML:
<body>
<div class="something"></div>
</body>
This CSS will not work:
.something{height:100%;}
But this one should:
body{height:500px;}
.something{height:100%;}
If you are tailing to mobile devices, continue using percentage as you normally would, but make sure that the body tag is set to the pixel height that the relevant device(s) have.
Add following code in your css file.
#boxBrowserContent .ui-btn{height:150px;margin:10px;}
#boxBrowserContent{padding-top:100px;}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
height: 400px;
width: 33.25%;
}
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.) {:¬)