I'm building a sandbox app in Angular and I want to use a modal in a component nested within a component.
The modal toggles on just fine, but it sits behind it's own backdrop - which is understandable. The docs recommend to use it as 'top level' in the HTML as possible, but is there any way to use custom CSS to force the functionality of the modal?
Thus far I've tried:
.modal {
z-index: 1701 !important;
}
.modal-backdrop {
z-index: 1700 !important;
}
.modal.show .modal-dialog {
z-index: 1702 !important;
}
And I can see that they are the rules being applied in the dev tools, but it still appears behind the backdrop and other components higher up in the DOM tree.
It will probably be better if you shared more code here (are there additional classes here? How did you instantiate the modal?)
Either way, check out this example:
http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Should be relatively easy :)
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
Angular4
Hi All. I'm have a single page within a large Angular4 app that needs to have body css that's different to the rest of the app.
I don't want to set ViewEncapsulation.None because it's just the one component that needs to be affected.
Can I use :host(), :host-context() or ::ng-deep in some way to select the body and apply the css rules? If so then how please? If not, is there another way to achieve this?
Thanks!
Thank you both very much. #Palpatine1991, you asked why I would want to access the <body> DOM element. This is because I have one page in the app which is a full screen game that is played on mobile devices and has drag and drop functionality within it. On iOS the "bounce" effect present in Safari makes drag and drop a very poor experience. So I wanted to add the following css to the body and html DOM elements of that single page, which suppresses that bounce effect.:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
I had a look into the solutions you gave (thank you!) and went with the following solution:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
This seems to work.
Thank you :)
Why do you need to add your CSS to <body> if it affects only one component?
Using :host() it will apply the styles to the element which is selected by component's selector.
Using ::ng-deep you can select only elements which are somewhere under the host element (but <body> is not under your host!)
The only way how to change the styles of the body from the component which has ViewEncapsulation.Emulated is using the Renderer2 API but it seems to me like a very bad practice
If you need to override some global <body> styling of your component, you can do it using :host-context. Example here: https://stackblitz.com/edit/angular-material2-issue-oodjmm
I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.
The jQuery UI dialog has a dialogClass option, which is nice, since the dialog is nested directly within the document <body>. However when setting the modal option to true, a ui-widget-overlay div is also rendered directly within the body (as a sibling of the dialog div).
Is there a way to, in effect, apply an overlayClass when opening a jQuery UI dialog with modal: true?
I know we could apply custom css to the overlay by giving the <body> a class attribute, or by overriding the .ui-widget-overlay class directly. I'm looking for a solution that would make a css definition like the following work:
.my-custom-class.ui-widget-overlay {
opacity: .5;
}
Actually there is a really simple way to do this using the CSS.(So long as you downloaded the jQuery UI library). There should be a jquery style sheet entitled: "jqGrid-custom.css"
Simply go into the overlays section and adjust this line:
.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }
There is no option for this. Looking at the source, there's not an easy way to jocky it in there either. For reference, here's the bit that adds the class:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
You likely would be best to just customize / update your css to override / extend the default stylings.