Pretty new to this coding stuff so forgive the ignorance :)
I'm trying to remove some inline styling from this Wordpress theme which I understand overwrites any external CSS files.
When I 'inspect element' I get the following, and changing hidden to visible on the right does work. But usually it would say like style.css:202 or whatever line of the CSS I need to change and that's how I usually do it. This time though obviously it says element.style { and I can see that style="overflow: hidden; on the left hand side (highlighted).
http://i.imgur.com/qkKHsy0.jpg
How would I go about essentially making that overflow visible?
I've added the following custom css but it just crosses out the overflow and doesn't change anything:
.slides_container[style] {overflow:visible !important;}
Thanks a lot!
For me overflow:auto!important and overflow:visible!important both working nicely.
See live here: http://jsfiddle.net/mayankcpdixit/h7JmT/
This is because there is a javascript which is adding these styles on document load. And I believe this is some kind of slider where usually the overflow is hidden. If you need a slider where overflow is visible, then select your desired slider and use it. Make sure you remove the present slider before doing so.
putting
overflow: visible !important
will allow you to give preference over styles inheriting from other style sources. But will not stop a javascript changing the styles.
I believe this one below created by roXon will give you some idea of overflow : visible sliders
http://jsfiddle.net/roXon/tMxp5/1/
Related
I'm trying to override overflow for a div from hidden to visible. It's a large project and I'm trying to add some new things in this.
I'm able to apply css to the element using Inspect element console but the same thing doesn't work when adding to the file as internal stylesheet
Tried using !important as well
Please let me know what might be causing this.
Thanks in advance.
There's no reason for CSS not to work while using an internal stylesheet.
Here are two things to try, check if your class name is spelt correctly and you're using the correct selectors.
And you might have a fixed width or height which is causing the content not to be able to scroll over.
Post the code on here for more help if you can.
Mark as answer if this was helpful.
I'm trying to get create a custom ionic control that will have an autocomplete drop-down. Normally how I would go around this is by creating a nested element of position:relative; followed by an child element with position:absolute;
But for some reason when I tried it on my control in ionic the control get's clipped. Initially I thought to assign a simple z-index would ought to do the the trick, but to my surprise it did not have any effect. Upon some close reading it seems to have something to do with stacking contexts; to make it worse it seems that ionic also marks elements .item-md as position:relative
Any idea how i could make a simple example like this work?
Edit:
I tried to reproduce the case in a simpler setup, but generally, it seems my concept should work. When I put it inside of ionic it gets clipped again.
https://jsfiddle.net/4exLpcv5/
I had a similar situation. Try this for the affected element:
overflow: visible;
After a lot of fiddling around and inspecting the dom tree I was able to partially recreate the problem in jsfiddle. The overflow: visible as mentioned by #willactual is part of the awnser.
Ionic's .item have overflow set on hidden. Which in forces the browser clip out of bound rendering. When I reset the overflow to visible at least in my minimum recreation it behaved as normal. However, trying to bring my example into an actual ionic application, still made the element got clipped.
Now the second part of the solution I stumbled upon by accident is the contain: content. It seems over the years CSS has had some extra properties to act as performance hints. Be it, that ionic actually makes use of these hints and set's the contain property which in result clips the html element.
I've builded banner for my home page and I want to hide a few HTML element in the responsive mode. When I run it on chrome browser and then I got an issue. This is css property which has been blocked by another css class. I can't figure it out where this css class is ? Anybody can help me to give me solution?
I agree with Cheslab, I think this is inline style resulting from javascript.
css with a viewport property will show its source of the top right side of the style section in the console.
Try putting in any css file:
img.imgSGHN {display:none;}
If this doensn't make any changes, you should be able to override the inline style by adding "!important" (not recommended) in your custom style.
img.imgSGHN {display:none!important;}
will get rid of .imgSGHN element.
The best way to approach the problem would be finding the script where it creates the inline css style and changing its behavior. Simply making it not override "display: " property will do.
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.