css: how to override max-width value with a larger (less restrictive) value
Tags: override,css
Problem :
I have a css file with this style:
.filefield-element .widget-edit {max-width: 70%;}
I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:
.filefield-element .widget-edit {max-width: 99%;}
In the "html/styles" pane, I see that the styles are listed in the correct order:
.filefield-element .widget-edit {
max-width: 99%;
}
.filefield-element .widget-edit {
float: left;
max-width: 70%;
}
However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.
Is there a way to override a max-width value with a larger (less restrictive) value?
Solution :
You can override (unset) max-width with
.foo{ max-width:none; }
... to clear any inherited max-width.
CSS Howto..
Browsers, for the most part, follow various specifications. Colours and gradients are defined in various CSS specifications which are maintained by the World Wide Web Consortium (W3C). The CSS2 specification,...
If you want the links for background-image, then you can use this RegExp. background-image.*?url\((.*?)\) Example implementation: $html = <<<EOT <div id="plugin-title" class="with-banner"> <div class="vignette"></div> <style type="text/css"> #plugin-title { width:772px; height:250px;...
By using $("#my_input").css("border", "1px solid black");, you're overwriting the CSS as you're adding that style directly to the element. Instead, use $("#my_input").css("border", ""); which will then force #my_input to use...
Try this: #test tr td:nth-child(3n+3) { display: none; } Check this fiddle...
1) Float the .numbering and .entry div left and set a width for both. 2) Set a width for your #left div. However, I would suggest you use <ol> instead...
Everything seems to look fine to me - assuming that I understand you correctly. Edit : Sorry - I am sure you looking for an alternatives. These might help Pure...
Well there's your problem! <div id="slideshow"> <ul> <li><img src="/images/header01.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li> <li><img src="/images/header02.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru -...
One solution is to compare previous text with new: $('.shop').click(function() { $('.shopList').slideToggle("fast"); $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+"); }); nav { position: relative;...
Just use the :not() selector (the * is implied): :not(button) { margin: 0; /* applied to all elements except <button> */ } Read more at https://developer.mozilla.org/en/docs/Web/CSS/:not...
I dont want to use *= require_tree. in application.css so that page specific css will remain separate to each other. In that case, why don't you include the file...
Given IE9 and later, this is possible entirely through the :target pseudo-class: #subsection:target { … } ...
try this - the colors should be garish enough to notice where they come from. .myDropdown option:checked, .myDropdown:focus::-ms-value { color: rgb(255, 255, 255); background-color: yellow; } .myDropdown option:checked:hover, .myDropdown:focus option:checked:hover...
you can just add the following styles: .document-item { margin-bottom:8px; width:50%; float:left; } Example Also note this few improvements: .number { display: inline-block; border: 1px solid #0084c9; border-radius: 50%; color:...
Try adding "../" at the beginning of the URI. For example: ../images/outbound-blue.png The "../" at the start of the URI tells the browser to go up one level to the...
Absolute positioning will only respect it's elder elements if it's parent or grandparent has position relative. If you did something like: body, html { height:100%; width:100%; } body * {...
Firstly, it should be div id="left" in your html since in your css "#left" not ".left". Secondly, what lee8oi said is true.You can try his method. Thirdly, you also can...
I would do everything possible to not mix Bootstrap into an Angular Material site. The idea of having 2 CSS frameworks in play sounds like nothing but a hot mess...
In CSS3 you can set the options: -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; that disabled selection and cursor manipulation from browser and in CSS3 you can look to...
Try this $(document).ready(function(){ var clicked = false $("button").click(function(){ if (clicked) $(".inside").css("transform","translateX(-500px)"); else $(".inside").css("transform","translateX(0px)"); clicked = !clicked; }); }); ...
When the browser scrolls past a certain point, this following CSS is applied to the basket: position: fixed; top: 0px; You can do this fairly easily using jQuery plugins like...
.first_one { margin-left: auto; margin-right: auto; text-align: center; } .second_one { width: 100%; } Then in your view, for the first one you would do <div class = "first_one"> ......
The first rule overrides it because off CSS specificty, that is it's more specific. http://www.htmldog.com/guides/cssadvanced/specificity/ Change second rule to: ul li.disabled, ul li.disabled:hover{ color:grey; } ...
Is this what you were trying to do? Fiddle I've erased almost all of your code and replaced it with new code. #fixed position: fixed; top: 0; left: 0; width:...
Well you could use CSS pointer-events which will stop all mouse events working, which includes :hover. CSS div:hover { background-color:black; /* will not happen */ } div { pointer-events: none;...
Changing to use button element, everything works fine. <button id="btnLogin" href="../main/mainx.html" data-role="none" data-corner="false"> Login</button> <button id="btnSignUp" href="../singup/signup.html" data-role="none" data-corner="false"> Sign Up</button>` ...
Typically You cannot remove properties from built-in objects like that, and certainly not in IE (the zoom attribute of the style object is a IE extension) You can set it...
You can use the attribute/value selector as follows; [style*="color:red"] { color: green !important; } [style*="color:green"] { color: red !important; } You need to use the !important keyword to avoid the...
If you're wanting the color/image to appear behind the entire menu block, then you're localizing the background too close to the anchor element. Just do this: #navigation {background: #ccc;} or...
-webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); Fiddle Also transitions....
You can make your RoomsController respond to the CSS format as well in order to get this to work: # app/controllers/rooms_controller.rb class RoomsController def show @room = Room.find(params[:id]) respond_to do...