Can't hide Boostrap button with css - css

When my page is loading, i would like to have a hidden button with css class.
It works with:
style="display: none"
but not with a css class:
<button class="ui left floated tiny button hidden">onclick="updateInformations()">Cancel</button>
and
.hidden { display:none }
It seems to have a conflit ".ui.button" in css.
How can i dow ?
Thanks for your help.

Try this
.hidden { display:none !important }
!important will make your class override bootstrap class's display behavior

This is a common issue with styles, i would recommend you to read about '!important' rule and use this inside the .hidden like so:
.hidden { display: nony !important; }
This should replace the old display rule with the new one.
You can always use JS for setting up the page :
$('#MeButton .button').css('display': 'none');

Try using the bootstrap classes for hiding elements:
class="hidden-xs "
Or use hidden-sm / hidden-md / hidden-lg according to your needs.

Related

Why the CSS inherit property overrides my style?

In the following example I have a Bootstrap button style which is hijacked by the color: inherit entry set by .k-grid of Kendo-UI:
.k-grid a {
color: inherit;
}
<div class="k-grid">
<a class="btn btn-secondary" href="#">Button</a>
</div>
Demo here: http://jsfiddle.net/aq9Laaew/299912/
You can observe that the inherit property of .k-grid a bypasses any other classes passed to the a tag. Eventually the Bootstrap Button is displayed with the wrong color inside a Kendo-grid table.
What is the correct way to fix this? I am not sure that adding a !important to the SASS of Bootstrap is the best solution.
After taking a look at your fiddle, I can see in the inspector that Bootstrap's reset applies the following: a:not([href]):not([tabindex]) {color: inherit;}
On top of this, the anchor in your fiddle doesn't have an href so the above CSS applies.
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="k-grid">
Button
<a class="btn btn-secondary">Button</a>
</div>
So trying to style your button (without a href) with:
.btn-secondary {color: white;} will not work due to CSS specificity.
If you are still confused about CSS specificity, find yourself a specificity calculator like this one and paste both selectors in.
You will find that .btn-secondary is not specific enough to override this rule coming from Bootstrap's reset that applies styles for your button.
Given that kendo-ui is also affecting your button styles with: .k-grid a {color: inherit;}, the best way to solve your issue is by targeting the button with (you guessed it) a selector of higher specificity.
.k-grid a {
color: inherit;
}
.btn.btn-secondary {
color: white;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="k-grid">
Button
<a class="btn btn-secondary">Button</a>
</div>
I recommend you to understand the css specificity
For example: http://cssspecificity.com
In your case .one-class is less specific than .on-class and an element
The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.
For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
This would help you :
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
If you want to dig in more :
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit ,
https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

Using :target for data attribute in CSS

I have an anchor that links to an element using data-attributes for which need special styles when targeted.
My logic
span[data-anchor="my-data"]:target {
/* styles */
}
anchor
<span data-anchor="my-data">My Data</span>
I'm using Shortcodes Ultimate (WP)
https://gndev.info/shortcodes-ultimate/
:target works on the currently active anchor
it doesn't really need a selector
try something like this:
html:
anchor
<span id="my-data">My Data</span>
css:
:target {
background-color: red;
}
see a working example here-
https://jsfiddle.net/0fkh8n09/

Not able to override Bootstrap properties in a particular div

This is my block of code in the HTML part
<header>
<div class="top_line"></div><br/>
<div class="container">
<div class="abcd">Über<span style="color:#2773AE">Tech</span></div>
<div class="top_line"></div>
</div>
</header>
I am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code:
.top_line {
background-color: #2773AE;
height: 5px;
}
.abcd {
font-size:50px;
line-height:25px;
}
Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?
Thank You
You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.
Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.
for example :
.abcd {
font-size:50px !important;
line-height:25px !important;
}
Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span

Overriding !important property used in widget stylesheet in the footer

I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.

Is it possible to change the css property of anchor tag

I have been using asp:Menu control and in 2.0 it renders as table and collection of anchor tag. I can't use display block property display is inline for anchor tag. Has anyone been able to change it?
in css you can write code like this:
table a {
display: block; or inline;
\\ you can add any attribute that you want.
}
It applies the style on all <a> tags inside a table.
An anchor tag, if i'm understanding your question correctly, is simply an a tag.
You can style it several ways:
- with a class/id, which makes use of css's speed:
a.anchorClass {
display: block;
color: red;
... ... ...
}
or with javascript after page load, you can get the element and apply css styles to it.
With jquery this is very easy:
$('a.anchorClass').css('color', 'red');
a { display: block !important;}
That should override any other declaration.

Resources