I have the following html structure (inside a wiki-content div) and I don't know how to reach it.
This doesn't seem to work, would you know why?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100%;
}
Thank you
It doesnt work because you have an inline CSS value of width set to 99.9315%. Inline styles get processed after your css so this will override any other setting for width in your css file.
Try removing the inline width setting.
Have you tried using !important?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100% !important;
}
You can try doing this and the try to put !important to override the existing width.
.table-wrap .relative-table.wrapped.confluenceTable
{
width: 100%!important;
}
If the inline style width is generated by a certain javascript, you need to re initialized it using also a javascript. because you can't override a inline style using css since it has the most specificity value. Please read this link about https://css-tricks.com/specifics-on-css-specificity/
Please see below javascript code to re initialized the width.
document.getElementsByClassName("relative-table").style.width = "100%";
Related
I need help on how to make CSS styles final so that they could not be overwritten by Javascript.
Problem: Sometimes, because of the img tag in the JavaScript code, everything, (all styles of all of the images) gets overwritten.
Here is my code:
<img src='logoImg' style='width:45px; height:30px;' >
Please tell me ways to do this in JavaScript or in CSS itself.
Desired output: I need the Logo Image to have final styling. So it is not affected by JavaScript through the DOM (document object model).
You can try adding !important keyword to your CSS properties to prevent them from getting changed.
Example
const test = document.getElementById("test");
// The color won't change to orange
// due to !important keyword in the CSS code
test.style.backgroundColor = "orange";
#test {
width: 50px;
height: 50px;
background: green !important;
}
<div id="test"></div>
Ideally though it would be better to work around this using a different solution like using a more specific method of selecting an HTML element and changing it's properties.
If you have some kind of a style applied by selecting a tag, you can override it by using a class or an id when it comes to CSS. If you're searching for elements in JavaScript code, you can look for them by a class name or an id value instead.
An alternative solution in your case would be to re-write/modify the JavaScript code that targets your img tags and either skip images that have a specific class like let's say logo, or make a custom class for all your standard images that do not include your logo element and look them up in your JavaScript code using document.getElementsByClassName method.
If you want to prevent JS to overwrite the style of an image, you need to style it in CSS and add important; to raise it specificty weight. !important has a higher specificty weight then inline-style and as such JS style (JS add the style as inline-style) wont apply.
function resize() {
document.querySelector("img").style.height = "200px";
document.querySelector("img").style.width = "200px";
}
img.test {
width: 45px !important;
height: 30px !important;
}
<img src='https://via.placeholder.com/200x200.jpg' class="test">
<button onclick="resize()">Test</button>
Please find here a HTML snippet and the corresponding CSS which build a BorderLayout:
https://jsbin.com/zokutalafe/edit?html,css,output
-
The yellow area in that BorderLayout example shall have a height of 100%, unfortunatelly it has not :-(
The question is now: Is it possible to change that yellow container's height to 100% by just modifying the CSS, NOT(!) the HTML, without using new [Edit: I mean "additional"] CSS selectors (means: something like ".borderlayout-center > div { height: 100% }" is not allowed)???
This is for a very special use case - that's why I have the above mentioned strange constraints.
Thanks a lot in advance.
You can use like below:
.borderlayout-center div {
height: 100%;
}
I'm not shure what you mean with new CSS selectors
But something like
.borderlayout-center div{
height: 100%;
}
it's nothing new and it works...
I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.
I am unable to get the width and heigh properties to work for my custom tags please see code below:
CSS
x-slider
{
width: 1000px;
height: 300px;
border: 1px black solid;
background-color: #0000ff;
}
HTML
<body><x-slider id="CoolPics" page="home"></x-slider></body>
Javascript
var x = document.registerElement('x-slider', {
prototype: Object.create(HTMLDivElement.prototype), extends: 'div'
});
I added the Extension of the DIV object to see if that would allow me to specify heigh since some tags do not allow for height. Is it only certain css properties that work with custom tags? Both the border and background color show up, I have tried changing over to both min and max height as well. Please limit response to the question and not the subjective argument of whether you should use custom tags, It made it significantly harder to search for answer for this with every post about custom tags overloaded with those kinda of responses.
Add display: block or display: inline-block to x-slider.
I am working with zurb foundation 5, and I want to have a fullsize cover on the front.
But because zurb sets the position of the body "relative", I have trouble setting absolute positioned Divs.
Here is the jsfiddle and when you just remove the:
body {
position: relative;
}
you will see, how I actually want it to look like.
http://jsfiddle.net/ZULv9/
I guess I could remove it from the framework, but I rather would like to overwrite it or just to remove the css value in hindsight to keep the my hands out of the framework. I believe that it must be possible somehow, I just haven't found out how this is done.
Therefore I would be happy for any suggestions.
You can set the body styling to:
position: static;
which display all elements in order of how they appear in document flow.
Hope this helps!
body {
position: absolute !important;
}
css override