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.
Related
I have a long tree element (mat-tree angular) in a <div> tag of fixed height with scroll. How can I change elements that are hidden outside the <div> (display: none)? Accordingly, when scrolling, the style should change
Well your answer is quite vague... But if you like to style elements based on their screen location you will have no luck with css and would have to calculate the position of the element and the current screen via java-script and do some javascript manipulations on the found objects...
that said:
don't do this.
First question:
1.) What is the problem?
2.) What do you want to achieve?
As #Vivek Vikranth also commented there are some well established things out there that COULD help... but your idea is to unclear yet.
Depending on your needs and supported browsers, you might have to use IntersectionObserver OR scroll event subscription / interval polling + document.elementFromPoint(). See:
https://caniuse.com/#search=intersectionobserver
https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.
When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.
My Goal:
Make the table containing the inputs visible in jsfiddle.
Understand why this was happening so I can put whatever content I like in here for the future.
JsFiddle showing answer
Code:
Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.
.containerDiv * {
margin: 0px;
position: absolute;
}
The solution css (apply relative position to the table elements):
#chartFilters * {
position: relative;
}
I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.
I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.
Steps I used for solving:
1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.
2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.
3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.
4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)
#chartFilters * {
position: relative;
}
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/
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:
ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
content:counter(instructions-section);
counter-increment:instructions-section;
}
The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others.
It worked like a treat and we were sitting there with smiling faces until someone thought of testing it in Internet Explorer 8, where we ran into some epic Microsoft-style weirdness. When a set was brought up by clicking, all the numbers were zero (0).
I googled around and found this page - it describes the problem fairly well (it's a combination of using :hover and css counter logic used in hidden content), but gives a solution that is less than satisfactory - I would love to be able to keep using the css counters and just implement some ie8-specific hack that somehow makes the page update the numbers. I'm having a hard time finding other stuff on the internet about this problem.
My particular page will describe zeroes until I move the mouse pointer into the div that contains the numbered list, at which point the numbers will magically fix themselves. Is there something I could to "nudge" the page into believing that a mouse is hovering over the element? Or is there a more proper solution?
Ive had the same issue. I was able to fix it by using JavaScript to apply inline CSS of padding-left 0 (there was already no left padding) once the element was visible. This seems to make IE 'redraw' the element.
If, as is suggested, the "hidden" is causing a problem then you could try "hiding" the content by instead moving it off screen with this piece of CSS:
.hide {
position:absolute;
left: -1000px;
}
I've used the code example from the linked to document to show a possible solution here: http://codepen.io/akademy/pen/LDhGl
I wonder what could be the better way to simulate double buffering for some possibly complex SVG. I'm reloading often a modified SVG, and I'd like to get rid of the load delay. I was thinking of using two overlapped DIVs and toggle visibility after onLoad. There is some better alternative?
edit
Now I have implemented two SVG instances in DIVs overlapped, with style display toggling (block/none). It almost worked in FF (nice, smooth morphing, just initial display resulted in reduced area), but Chrome refuses to get me the ScreenCTM transform I need for syncing shapes position. I guess those problems (partial area render in FF, no render in Chrome) are related. Now I'm experimenting with visibility:hidden instead.
edit
toggling visibility give acceptable results. Thanks everybody for the help so far.
edit
I've found a problem, that make me here again for an helping hand:
I'm using Boostrap for non SVG related UI, and the toolbar behaves really strange: when I switched visibility on the 2^ DIV (initially hidden), no event arrives to the toolbar. Switching again to the 1^, events are ok.
I found that using position:absolute or position:fixed is the same (for the events problem, of course), and top:0 it's the 'culprit'. Using any value > 0 let the event flow, but the DIV goes invisible. So the intial question make sense: any better method than switch visibility? or a hint on html structure? Currently my HTML looks like
<div class="row-fluid" style="height:800px;background-color:cyan">
<div id="flowchart" style="visibility:visible;width:100%;height:100%"></div>
<div id="flowchart_x" style="visibility:hidden;width:100%;height:100%;position:absolute;top:0"></div>
</div>