On the Angular Material components overview there's an example of slide toogles with icons:
This looks really nice. Unfortunately this example isn't explained in the actual docs of the component.
So what I tried is this:
<mat-slide-toggle labelPosition="before" color="primary">
<mat-icon>dark_mode</mat-icon>
Dark Mode
</mat-slide-toggle>
I have this wrapped inside a menu and the result looks like this:
So it's almost there, but not really. Everything is not aligned correctly.
My questions are:
How to align the icon, label and toggle correctly?
How is it possible to increase the distance between label and toggle like in the examples from the docs?
Try it on Stackblitz
You can modify the generated CSS in the app.component.css file:
:host ::ng-deep .mat-slide-toggle-content {
display: flex; /* Turn into a flexbox container for alignment */
}
.material-icons {
margin-right: 5px; /* Spacing from the content */
}
:host ::ng-deep .mat-slide-toggle-label-before .mat-slide-toggle-bar {
margin-left: 50px; /* Spacing from the icon and content */
}
It could have been enough to add .mat-slide-toggle-content or .mat-slide-toggle-label-before .mat-slide-toggle-bar but for some reason it was not working. The solution here came handy although it looks unorthodox: CSS style from app.component.css not getting applied to the tabs body content
You can see the full code here: StackBlitz Demo
Related
I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.
I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.
The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though.
So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.
.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}
I wanted the modals header background colors to change, which I did not.
You can override modal popup css by using following code, this is work for me try this once.
put this at the top of page or on conman page
#media( min-width: 768px ) {
.modal-header {
background-color: black
}
}
I am using http://app.raw.densitydesign.org/#%2F angular application and have used twitter bootstrap for accordion. Now, the problem is that when I am adding ui-bootstrap library, it is hiding the default horizontal scrolling functionality. Without this, it works fine. So any suggestion, how can I make it working with this library.
-- using 0.11.2 ui-bootstrap
Thanks
You can override that by using overflow-x. I couldn't see accordion on the link you gave but generally you can apply it by:
http://jsfiddle.net/882jof8L/
//CSS
#your-accordion .panel-body {
overflow-x: scroll;
}
//HTML
<div class="panel-body">
<table style="width: 1000px;">...</table>
</div>
Properties you can use with overflow-x:
overflow-x: visible|hidden|scroll|auto|initial|inherit;
In your case adding your style sheet after bootstrap might help:
<link rel="stylesheet" href="YOUR_PATH/bootstrap.min.css">
<link rel="stylesheet" href="YOUR_PATH/YOUR_STYLE_SHEET.css">
Styles are applied in the order they are read by the browser. This means styles appears at the top of a style sheet will be changed by the last one.
For example following style will result paragraph as black:
p { color: red; }
p { color: black; }
Or you can force browser to show scroll by using:
overflow-x: scroll !important;
What does !important do:
CSS rules that has the !important directive will always be applied no matter where that rule appears in the CSS document.
It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?
Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.
Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.
Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.
The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.
Has anyone managed to find a solution to this?
The .btn-group class, which is the container for the dropdown-menu is positioned relatively so altering the z-index of the dropdown-menu class won't do any good. You can position is absolutely and then adjust the positioning from there. Something like this should get you started:
.k-grid-content .btn-group {
position: absolute;
}
.k-grid-content .btn-group .btn {
top: -10px;
}
Link to a jsFiddle that demonstrates it in action.
The problem is to do with the Grid content being permanently set to overflow-y: scroll which it doesn't really need (unless you are a fixed height with the virtualization feature).
By changing the CSS of the grid content to remove the scroll bar, setting overflow: visible and adding extra padding to account for the missing scrollbar, it now works.
I've updated the jsFiddle to demonstrate.
Thanks for all the help.
For future reference, in case you have other grid cells that might contain data that will overflow into other columns with the above fix, you can set a class to the custom grid action column like so:
columns: [
{
field: "Actions",
title: " ",
filterable: false,
attributes: {"class": "actions-column"},
template: <your action button template or template link here>
}
]
Then in the styling for the page add the following CSS:
.k-grid-content tr td.actions-column {
overflow: visible;
}
edit: small css selector change