Apologies about the vague question in the title, but I've been learning how to build and style dashboard's in plotly dash using CSS for several months now and I've always struggled when trying to style dropdown menus. That is until I tried to replicate this dashboard using this code because I liked how the dropdown looked:
It appears that the code that controls this is in the custom-styles.css file and looks like:
.Select-menu-outer {
background-color: #2f3445;
border: 1px solid gray;
}
.Select div {
background-color: #2f3445;
}
.Select-menu-outer div:hover {
background-color: rgba(255, 255, 255, 0.01);
}
.Select-value-label {
color: #a5b1cd !important;
}
But neither '.Select-menu-other', '.Select div' or '.Select-value-label' appear in the python files as a className (or at all for that matter), so I'm a bit confused because I thought in CSS the dot notation was used to create a class that would then have to be called from Python but it's as if these are pre-assigned classes.
So my questions are:
What are these classes? Are they pre-assigned and in what language? Is there any documentation on them?
Are there any other classes of this type that can used to control the styling of Radio Items, Sliders or Date Range Pickers etc?
If I'm following somebody else's code how do I know if they're using a pre assigned class or a class that needs to be called explicitly
It looks like they might be something to do with Javascript but I couldn't find any documentation on them but I could be wrong so any help would be appreciated.
Related
How can I use next 2 CSS examples in React to act exactly as I would do it in plain CSS/HTML, but without using danerouslySetInnerHTML:
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
I did tried to Google those 2 cases but there wasn't anything that covers them.
EDIT: There is much more css behind the scene and I want to transform that css and html to React component. The problem is that I don't know how to transform media query from plain CSS into React. I want for that media query to be applied on entire Component. I know how to transform CSS to React in general, but I have this specific situation (I am still new to React) when there is media query and grouping selectors and I don't know how to transform those in React to be used in that component for only that component.
The danerouslySetInnerHTML is not a proper way to add CSS to a react application, there are many ways to add CSS, for example I use PostCSS preprocessor and for example Less, Sass, SCSS, JSS and many other ways are exist that you can use them, But if you just wanna run a test, make a style tag and put these two CSSes in it and absolutely your browser find it out and show you the results like plain HTML/CSS.
Do like this below code:
<style>
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
</style>
And put it in your code. Undoubtedly it works.
But with your more explain and editing the question, I understand that you need JSS for your work, for more information visit this link
You can use in inside of your react app with less complexity. you can prepare your CSSes just like you want, as a JavaScript object:
const viewPortSizes = {
height: "100vh",
width: "100vw",
};
And then use it in your JSX tags.
Hope it helps you.
I'm creating a web app and need to decide on a consistent way to style my elements. I noticed that a lot of help online uses classes but I have generally used attributes (like the query selector [my-attr]) to style multiple elements, since I don't have to work with classList and can remove and set attributes very easily.
Using no external libraries, why would people use classes to style their elements over attributes? It seems like attributes can do everything classes can do but better, since you can also assign values to the attributes as well. I also haven't seen any discussion on performance differences anywhere, making me believe that attributes should be more appreciated than they are in tutorials on styling pages.
Any thoughts on instances where classes could do a better job than attributes at something would be greatly appreciated, even if the arguments are subjective and come down to some sort of preference!
Thanks!
Again, this is for vanilla javascript, HTML, and CSS. I understand that libraries like jQuery may make it easier to use classes, but I don't plan on using any libraries.
It's more consistent, is the end-all be all, truthfully. If you'd rather use attributes, go for it. However it makes it just that much more difficult for anyone who has to help you out later. CSS classes are designed for grouped selection and application of common styles. CSS just happens to also be able to select attributes as well, because it does make sense in some edge cases.
Generally, attributes should be reserved for anything non-style related that adds a value for a different use, be it screen-readers or variable containers for JavaScript, such as data-id="34" may let you make an asynchronous request with the ID parameter.
Consider this example, it's got some simple "class" based buttons:
.button {
display: inline-block;
border: 1px solid;
padding: 4px 10px;
text-decoration: none;
margin-bottom: 4px;
}
.primary {
background: currentColor;
}
.primary span {
color: #fff;
}
.blue {
color: #0095ee;
}
.red {
color: #ee3300
}
Red Button
<span>Red Button</span>
<br />
Blue Button
<span>Blue Button</span>
To replicate something like this with attributes, we'll be doing something like this with some obnoxious and rather arbitrary attribute names. Doing this I actually messed up because I used the wrong attribute name and value pair in one case.
[type="button"] {
display: inline-block;
border: 1px solid;
padding: 4px 10px;
text-decoration: none;
margin-bottom: 4px;
}
[status="primary"] {
background: currentColor;
}
[status="primary"] span {
color: #fff;
}
[color="blue"] {
color: #0095ee;
}
[color="red"] {
color: #ee3300
}
Red Button
<span>Red Button</span>
<br />
Blue Button
<span>Blue Button</span>
Does it not make more semantic sense to keep all your stylistic and group target attributes inside the class attribute? I mean, that's what it was designed for. I suppose you could drop the parameter value and just use parameter names, but you're really defeating the purpose of attributes, considering class is a Global Attribute in and of itself.
Here's a JavaScript example as well:
let classes = document.getElementsByClassName('button');
for( i = 0, n = classes.length; i < n; ++i ){
classes[i].style.background = 'red';
}
let attrs = document.querySelectorAll('[button]');
for( i = 0, n = attrs.length; i < n; ++i ){
attrs[i].style.background = 'blue';
}
a {
padding: 10px;
margin-bottom: 4px;
display: inline-block;
text-decoration: none;
color: #fff;
}
<a href="#" button>Attr 1</a>
<a href="#" button>Attr 2</a>
<a href="#" button>Attr 3</a>
<br />
Class 1
Class 2
Class 3
Putting aside the fact that JS has immense integration with class (and id) based functions for selectors, you have to use querySelector and querySelectorAll for the attribute buttons.
While not inherently a bad thing, (honestly I prefer querySelector over getElement(s)By… in general), but when you look at it, querySelectorAll('[button]') just does not read well, almost like I'm targeting a <button> element. Semantically it makes it harder to read than:
getElementsByClassName('button') - Clearly getting all elements that have a button class, or even
querySelectorAll('.button') - Since the . is universally understood as the "class" selector, and everyone working with HTML, CSS, and JS learns that on literally day 1 of any web development program/tutorial. So you're throwing a bit of a wrench into the project by removing such a fundamental piece of it.
I'm sure you've heard the phrase "Just because you can, doesn't mean you should." - I think that applies perfectly here. I mean, we actually used to use things like <font color="red">Red</font> and we moved away from it because it made more sense to group styles in a single Global Attribute. There's nothing stopping you, but I think it's asking for more trouble than it's worth to drop classes for arbitrary parameter names, not to mention if you have an issue and post your code for help, the first response will always be "Why are you doing that, what preprocessor are you using?"
I think it's just the functional probl, if you want to give style u should use class, but if you want to modify u can use query selector cause it will not added an inline style on your html and you can minify the script.
Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.
For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.
Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.
I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.
Thanks for the help.
In your css, make a rule like :
.is-boy{
background: blue;
}
.is-girl{
background: pink;
}
and declare in you angular app a scope var like $scope.userSex = 'boy';
and on your body use ngClass like this
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...
:host-context selector
You could use the :host-context selector to apply styles to your component based on the parent component.
styles:[`
:host-context(.parent1) div{
border: 1px solid blue;
}
:host-context(.parent2) div{
border: 1px solid blue;
}
`]
This allows you to conditionally apply styles based on a the selector that wraps the component.
plunker
edit:
So in your case - your parent would have a div with class .boy and a div with class .girl
You could load these containing divs with some flag controlled by ngIf
If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.
I have a factory I call that returns some HTML. I would like to display this HTML in a section of my app, but I don't want its CSS to affect the site's, nor do I want the site's to affect it. It needs to be an iframe more or less but I feel like there's a better way to do it in Angular.
I essentially have something like this (Angular 1.2)
var promise = myFactory.getHtml();
getTemplate.then(function(data) {
$scope.mine.html = $sce.trustAsHtml(data.data);
});
I can display this HTML no problem, but it looks terrible inside of my app. How can I make it independent?
Select your element (say using an id selector) and use the following rule to reset all its properites
all: initial;
see https://developer.mozilla.org/en/docs/Web/CSS/all
and then apply the specific properties for your div. For example
CSS
div {
color: red;
background-color: blue;
}
#a {
all: initial;
color: blue;
}
HTML
<div id="a">asdf</div>
The fact that it is an angular template need not come into the picture.
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/