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.
Related
I am styling a website using CSS. In my project, I need to apply the style to a modal in a bit of a hacky way.
I have elements in the following order.
<div class="dialog">
<div class="dialog-content">
<div class="my-dialog-content">
//I can change the my-dialog-content and the content within it.
</div>
</div>
</div>
In the markup above, the .dialog and .dialog-content come with the npm package so that I do not have control over it. Which means that I cannot add new classes to them. I am trying to override those classes/ elements but I am trying to override for just one dialog. If I override as follow,
.dialog {
border: 1px solid red;
}
it will apply the style to all the dialogs/ modals in the entire project.
I am looking for a selector the .dialog that has the children with .my-dialog-content within it. I tried using has, but it is not working. How can I do that?
you can't have it with css
because in css you can select a child that has certain parent
but you CAN Not Select a Parent based on it's child
for that why you have to use javascript(or in this case hope you have jQuery):
first add style:
.foo{
border: 1px solid red;
}
then add this style to you element with jQuery:
$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')
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.
So I always thought if the parent container has a property set, it supercedes the child. So in my case I want the parent container to be hidden, but the child elements have a visibility of visible. But it seems the child elements visibility property supercedes the parents and thus will still show.
But the twist is if using display property, it works the way I want. Here is the html:
<div class="wrap">
title
</div>
<div class="wrap2">
title2
</div>
CSS:
.wrap { visibility:hidden; }
.wrap a { visibility:visible; }
.wrap2 { display:none; }
.wrap2 a { display:block; }
http://jsfiddle.net/yPXtB/
So what I want is the ability to hide the container if I set the visibility to hidden even if the child elements have visible.
Another workaround is to use opacity with values 0 and 1 instead of visibility.
(Though check out http://caniuse.com/#search=opacity for compatibility with too old browsers if it's important)
If you need the child css to have visibility: visible, then you can't simply set the parent to hidden, because parent doesn't override the child.
You'd need to either set each individual child to hidden as well, or wrap the children again in another div with visibility: visible, and toggle that to hidden instead of the parent, i.e.:
<div class="hiddenwrap">
<div class="visiblewrap"> /* toggle this instead */
/* content without visibility properties */
</div>
</div>
.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }
visibility: hidden causes the element not to be drawn, but it is still there and even the space it occupies stays occupied. The flow of the page isn't affected. Therefor it is possible to still draw the child in that space.
The child does use the parent's visibility if you don't specify it explicitly, as you can see here: http://jsfiddle.net/yPXtB/2/
display: none not only hides the element, but removes it from the flow of the page as well. Display affects the way the element behaves and changes the flow. There is no more space to draw the child in.
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
Let's say we have:
<div id="view-item-hero-info">
<h2>{{name}}</h2>
<h4>{{location}}</h4>
<h3>
<span id="view-item-hero-header-score">
You scored {{userScore}}pts
</span>
</h3>
{{description}}
</div>
Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?
Note: I don't want to hide the element, just everything inside it.
Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.
You can try:
#view-item-hero-info {
color: transparent;
}
Using this CSS:
visibility: hidden;
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
display: none;
you can use this code if u need hide text
.text-hidden{
font-size: 0;
text-indent: -9999px;
}
to hide all direct child's
use
.hidden-nested > *{
visibility: hidden; /*or next line */
display:none ;
}
if you need all child's use last code but change class to
.hidden-nested *
Use css display property. In HTML this would look like <span style="display: none">
Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"
in css:
#view-item-hero-header-score {
display: none;
}
Using CSS you can set a style:
visibility:hidden
So to hide all descendants (*) within your element:
#view-item-hero-info * { visibility: hidden }
If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)
Rather than selecting all (*) you can select particular descendants eg divs:
#view-item-hero-info div { visibility: hidden }
Equally instead of the visibility you can use:
display:none
The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option
EDIT:
There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.
As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.
Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:
var items_i_want = document.getElementById("view-item-hero-header-score").elements
for(var i = 0; i < items_i_want .length; i++)
{
items_i_want [i].style.display="none"
}