Different css styles of .modal-open for different modals - html

i have a modal with id #exampleModal , and there are three more modals in website.
What i want is when i open the #exampleModal the .modal-open class should have this css
.modal-open{
overflow-y : "scroll"
}
And when the other three opens they should have the default that bootstrap gives?

Good practice if you have multiple Modals (or multiple carousels/accordions etc) is to make sure they all have a different id. This is important for W3C validation especially.
Best Bootstrap Tip - The id can be anything you want. Then you can style that id any way you want.
Let's say you label each one as id="modal-1" and id="modal-2" etc.
Then, in your CSS all the id's can be edited independently of each other...
#modal-1{
/* Your styling */
}
#modal-2{
/* Your styling */
}

Bootstrap runs this automatically when modal is shown:
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', function (event) {
exampleModal.style.overflowY = "scroll";
})

Related

Can you set body id dynamically in React?

I am trying to implement dark mode in my app.
The idea is to add this to the root element:
<div id="dark">
And then this in CSS:
#dark {
background-color: #1A1A2E;
}
And then in Css, customize each dom element by using classes. For example, here I will work on cards:
#dark .card-body {
background-color: #16213E !important;;
}
#dark .card-header {
background-color: #0F3460 !important;
}
Now, this works perfectly fine.
But, with Modals, it does not work. I think it's because Modals are not rendered initially so for some reason the dark style does not apply to them.
What worked though is adding id="dark" to each modal:
#dark .modal-header {
background-color: #0F3460 !important;
}
#dark .modal-body {
background-color: #16213E !important;;
}
#dark .modal-footer {
background-color: #16213E !important;;
}
<Modal
// dark doesn't get applied automatically for modals because apparently modals are not rendered in the beginning
id="dark"
isOpen={this.state.isModalOpen}
toggle={this.toggleModal}
>
<div className="modal-header">
But, it'll be a pain to apply this to every single modal.
One solution mentioned here:
Modal should be the descendant of a tag which has id="dark". It is
loaded by the script right below the script tag and you are trying to
put 'dark' id on some div tag and the modal doesn't lie inside it,
thus the CSS selector not targeting it.
So, you need to put id="dark" on the body tag.
This solves the modals issue.
But, the problem is in my original implementation of dark mode, I am controlling that id in the root component like this:
// Root component
<div id={this.state.should_enable_dark_mode ? "dark" : "default"}>
And should_enable_dark_mode is managed like this:
manageDarkMode() {
window.addEventListener("storage", () => {
console.log("change to local storage!");
let should_enable_dark_mode = localStorage.darkMode == "true";
this.setState({
should_enable_dark_mode,
});
});
}
So the problem with the solution mentioned above is that I couldn't find a way to control the body tag from the react app. And I am not sure if it's a good thing to do.
What do you think I should do?
I see in the comments to your original question that you decided to just modify the body element in the browser DOM, which will probably work fine since the body element is not controlled by React and will likely not be changed by any other code.
I would however like to suggest a few improvements that makes it at bit less dirty:
use a data attribute like data-display-mode="dark" as a target for your CSS selectors instead of the ID. IDs are supposed to be stable and other tools and libraries (e.g. UI test tools) might rely on this.
use the Modal.container property to attach your Modals to the App element (the React-controlled global parent div defined in your React code, which you can control, not the app-root-div in index.html). Then set your data-display-mode attribute here by React-means. This way you will not bypass the virtual DOM.
use CSS custom properties for defining your colors, and then define all dark mode modifications in one place. Don't spread your dark-mode-styling code across multiple class selectors - you will have a hard time maintaining this.

How do I use MDL Tabs to link to places within page without hiding other content

I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!

how do I create unique looking angular ui bootstrap dialogs

How do I style angular-ui bootstrap modal dialogs so they appear different from one another in color and/or size? I can style them for the site but not individually.
I found the following similar question but it only provides a solution to change all dialogs: How do I increase modal width in Angular UI Bootstrap?.
During initialization there are options to apply size='lg' and size='sm' but this is not nearly enough to style different dialogs as I would like.
I have tried structuring my html as follows:
<div id="area1">
<div ng-include="'my-dialog1.html"></div>
<div>
<div id="area2">
<div ng-include="'my-dialog2.html"></div>
<div>
Then I have made different css rules for area2 .modal-dialog and area1 .modal-dialog but they have no effect because the html output of those dialogs is not rendered as child elements of my divs.
Is there any way to get individual control over those dialogs?
Angular UI modal configuration can accept CSS class name parameter windowClass. You can provide individual class for each of your dialog and set necessary styles per class:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'fancy-modal'
});
It will add fancy-class to the topmost modal container, so from there you can set/overwrite whatever styles you want for any inner element. For example:
.fancy-modal .modal-content {
background-color: #EEE;
}

Element not receiving style from one of its classes

Alright i have a button element as follows:
<button class='secondary row_1 col_1 not-sticky'>Button</button>
styling for secondary etc work, but it does not pick up the styling from 'not-sticky'. This is my basic styling:
.not-sticky { color:#FFFFFF; }
.sticky-state { color:#000066; }
When a button is clicked this code is run:
if ($(this).hasClass('sticky-state'))
$same = true;
//change old sticky classes to not sticky
$('.sticky-state').removeClass('sticky-state').addClass('not-sticky');
if (!$same)
$(this).removeClass('not-sticky').addClass('sticky-state');// chain our jQuery methods
Once this is run, the styling from sticky-state does work properly and the text color becomes #000066.
Also - through the use of chromes inspector i was able to verify that the classes are changing between not-sticky and sticky-state properly, just the styling from not-sticky is not showing at all
What could be making the not-sticky styling from not being applied at all?
Thanks
Here is the whole style sheet: http://staging.easyzag.com/style.css
It works in this fiddle: http://jsfiddle.net/c7XHX/
Don't know if $same was declared or not, but you always need to declare your JavaScript values.

diasble css style for specific element?

How can I set the default style for a checkbox in jquery or javascript or even html code?
or in another way how to disable the styling for checkbox.
there is a external css file that set the style for all checkboxes, but I would like to override the style to default style for specific checkboxes.
thanks
I use css' !important whenever I want to override some values.
But most modern browsers allow specific css selector like
input[type="checkbox"] {
//insert style here
}
you can use this to manipulate any style specific to checkboxes.
good luck.
This can be done easiest by controlling the CSS that's styling your check box to begin with.
Instead of the CSS on your page laying styles for all constants (body img input). Instead assign classes to the individual items if you want them styled a special way.
So dont use:
input { background: #000; }
Use:
<style>
.mystyle { background: #000; }
</stlye>
</head>
<body>
<input type="checkbox" class="mystyle">
Check to make sure all CSS on your site is clear of constants, this will make sure everything is set to default on all your pages and only styled at your choosing.
You can use JQuery to reset a css value ... like
$(this).css("color","red");
------------samples------------
$(document).ready(function() {
/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");
/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});
});