Is it OK to style a block from "outside" depending on an "inner modifier"?
Here's an example:
HTML
<div class="Header">
<div class="Button Header__button">
Seperate Block with optional modifier Button--expanded
</div>
</div>
button.css
.Button--expanded {
height: 100%; /* Default height of expanded buttons */
}
header.css
/* Expanded buttons within header have a different height */
/* Approach 1*/
.Header__button.Button--expanded {
height: 32px;
}
/* Approach 2*/
.Header__button--expanded {
height: 32px;
}
The Button--expanded class is dynamically added by some modular JS which only knows the Button control/block itself. Therefore Approach 1 works "out of the box" whilst Approach 2 would need some extra JS to somehow bubble the expanded state up to the Header control to set the explicit modifier class Header__button--expanded to the Header__button element...
I know that there's no absolute right or wrong when it comes to such decisions but I'd really appreciate if someone could point out the pros & cons of each approach.
It depends on what you want to style.
Is '--expanded' modifier are common for all Buttons? Or only for Header__button?
If you want to add modifier only for header, use approach 2.
If you want to have more global buttons modifier, use approach 1.
Related
So, I'd like to set the height of the collapsed navigation of bootstrap to 100% height.
e.g. https://getbootstrap.com/examples/navbar/ this should span over the whole screen.
I did some research and mostly found people using height: 100vh; but this is not dynamics, shouldn't matter too much in the end though, but I still don't like it.
Usually, one could e.g. do:
<div id="bar">
<div id="foo">
test
</div>
</div>
html,
body {
height: 100%;
}
#foo, #bar{
background-color: red;
min-height: 100%;
}
But I'm asking myself now, what's the best approach to implement this when using bootstrap v3.
you can hide the Content while the Navigation is collapsed using JavaScript..
for example: document.getElementById("ID").style.display = none;
if there is no content under the Navigation, there is nothing to scroll... :P
So I'm asking myself then, how I can deactive scrolling when the navigation collapsed?
I somehow fail listening to the proper event
As per your comment, I see the issue is that you dont get the proper point of the collapse. The plugin provides the events on collapse.
By bootstrap documentation this is how you do
$('#foo').on('hidden.bs.collapse', function () {
// do something…
})
I have a block that can be used in two scenarios:
list of such blocks
individual block placed among others of different kind
What are the best practices for deciding its margin?
Say the block has class main and a precending and a following block are respectively classed preceding and following for the second scenario.
If I set a margin for main and for the second scenario, I need preceding and following to be touching main, then should I set negative margin's on preceding and following?
Or another solution is to set margins using immediate sibling selector .main+.main and not for .main.
I'm guessing I'm missing some other solutions. May I know what are other possible solutions. Also, what are the best practices here?
One way around this is to determine the margin to be set on your .main class div by chaining it to another class that you add based on circumstance. This way, you can keep all of the shared features for your main div in one place and just differentiate on the margin (or any other style that needs to be different).
DIV Individual
<div class="main individual">
DIV With others
<div class="main shared">
CSS
.main {
width:50px;
height:50px;
}
.main.individual {
margin: 5px;
}
.main.shared {
margin:1px;
}
I normally only set bottom margin to the blocks, to avoid the margin collapsing. i.e.
.element {
margin-bottom: 30px; /* or margin: 0 0 30px; */
}
I also suggest to set each class per block, and use a shared class if necessary. i.e.
<div class="element element-1">...</div>
<div class="element element-2">...</div>
You can easily use .element for shared styles, use .element-1 and .element-2 for anything that is different.
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
​
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
I have an html img that is being styled by a CSS class. I would like to override the width and height values used in that class under some circumstances.
I'm building this img tag using something called a TagBuilder class, provided by Microsoft for the .Net system, which allows developers to assign attributes to an html element.
In this case a CSS class has been assigned to the img tag, and I can assign width and height attributes individually, but they're not taking precedence over the values set in the CSS class.
My tag looks like this currently:
<img alt="my link" class="static" height="240" id="StaticImage" src="http://imageserver.com/myImage.jpg" width="240">
The static CSS class has width and height values of 300 each, and as you can see I'm trying to override them with 240. It's not working in this instance but can I do it without a second CSS class?
You can add a style attribute to your img:
<img alt="my link" class="static" height="240" id="StaticImage"
src="http://imageserver.com/myImage.jpg" width="240"
style="height:240px;width:240px;">
You can either use inline css
<img alt="my link" style="width:240px; height:240px;" class="static" id="StaticImage" src="http://imageserver.com/myImage.jpg">
OR
in your css, you can define the style with a !important modifier
.static {
width:240px !important;
height:240px !important;
}
That way, regardless of everything, your width, height will always be used.
Try narrowing down your element selection as much as you can. The more specific, the better chances you have to override a declaration. Per example, add the class AND the ID of the element:
#StaticImage.static {
height: 240px;
width: 240px;
}
You can even go crazy and add its attribute:
#StaticImage.static[alt=my link] {
height: 240px;
width: 240px;
}
If it fails, raise its priority:
#StaticImage.static {
height: 240px !important;
width: 240px !important;
}
You can make it even more specific by including its parent element. Can inline css override everything else? Sure, but if you can add inline css, why don't you add another class instead to narrow your selection even more? That way you can control all your css within your file.
Also, check if there's a line of JavaScript forcing the element's size. JavaScript can alter the css value, no matter what it is.
I am having trouble with elements inside an updatepanel losing their styles when the updatepanel refreshes. I know this isn't a new question and have already read the following threads
Someguys Blog on it
And another thread on it
And the possible work-arounds include: surround the update panel with a div, surround the update panel with a div.
This doesn't really work in my case because I have several elements inside my update panel but I want to only apply the style to two elements inside it and this method makes every element inside the update panel reflect the styles.
Any suggestions would be appreciated
-J
You can use a class on a surrounding div to control the style on elements inside the div. Put classes on some elements inside to identify them, and change the class on the surrounding div to trigger the change.
Example:
<div id="container" class="hide">
This is the content that can change
<div class="someelement">asf</div>
<div>qwer</div>
<div class="otherelement">uyhgf</div>
</div>
You can change the class on the outer div:
document.getElementById('container').className = 'show';
Now you can set up CSS rules to show changes on the inner elements depending on the outer class:
.hide .someelement { display: none; }
.show .someelement { display: block; }
.hide .otherelement { color: yellow; }
.show .otherelement { color: black; }
When the timer replaces the content the inner elements will still look the same, as the class controlling the appearence is on the outer div.