Why some fielsets title are blank? Please see images:
This seems to be a regression with the latest Chrome version, as a workaround I came up with these two hacks:
.x-fieldset-header {
overflow: unset;
}
.x-fieldset-header-tool-default > .x-tool-toggle {
opacity: inherit;
}
the opacity hack fixes invisible arrows/checkboxes when the fieldset is set to collapsible.
Related
So I have a range input with the css rules shown below. The goal is to have only the thumb of the range respond to pointer events. Works fine in Chrome and Safari. But in ie-11 and Edge, the entire input stops working. I know that pointer-events is experimental, but I also know it is supported in both of those browsers, but maybe not for pseudo-elements?
input[type="range"] {
pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
pointer-events: auto;
}
First, please refer to the following sample:
<style>
.bottom {
background: yellow;
width: 600px;
height: 200px;
}
.top {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*pointer-events: none;*/
}
.test{
/*pointer-events: none;*/
}
div{
display:block;
}
</style>
<div>
<!-- bottom div -->
<div class="bottom">
<br>
<input type="range"/>
<br>
<input type="range" class="test"/>(pointer-events: none)
<br>
</div>
<!-- top div -->
<div class="top">
</div>
</div>
In this sample, because the top div is on the top of the range element, so we can't select range (using IE, Microsoft Edge and Microsoft Edge(Chromium)).
After adding the pointer-events: none; in the top class, they are able to select.
Then, if we add the pointer-events: none; for the second range element, in IE browser and Microsoft Edge (chromium), the second range input can't be selected. But in Microsoft Edge (Microsoft Edge 41.16299.1480.0), it is still can be selected. It seems that this is the Edge browser default behavior or issue, I will feedback this issue. So, you could consider to use this method to add top div.
Second, since the new Microsoft Edge is chromium based, you could try to install the new Microsoft Edge and use it.
Besides, I think there have another choice, you could use JQuery script to find the range input elements and use the disabled property to enable/disable it.
$("input[type='range']")[1].disabled = true; //disable
So the final result I am trying to achieve is only show .panel-text when user hovers over panel. In this case I tried the overlay CSS class, since it covers the entire div. Yet whatever I do either the text doesn't show at all no matter hovering or idle or the text is displayed always. Below is what I have tried.
.panel-text {
display: none
}
.panel-overlay:hover .panel-text {
display: block
}
The above only hides .panel-text always. Another attempt at it is below:
.panel-text { opacity: 0; }
.panel-overlay:hover panel-text { opacity: 1; }
Now I have attempted to try .panel-title as well .panel-button .
Any help is greatly appreciated, all other posts shown display what I have been using. Even if we have to display an icon when .panel-text is hidden could work out.
Somwthing link this is what should happen
Link
Do it in this way.
.panel-text {
visibility: hidden;
}
.panel-overlay:hover .panel-text {
visibility: visible;
}
So for some reason nothing was working when trying to use with .panel-overlay, so trying the image wrapper did the trick. Using visibility or display will not perform correctly still. Below CSS worked out, works exactly example provided (link) except icon, will work on that later.
panel-text { opacity: 0; }
panel-mainimage-wrapper:hover .panel-text {opacity: 1; }
I'm trying to hide the scroll-bar in ion-content (Ionic 4)
there's no ion-scroll on ionic 4 so I used the ion-content
but I can't find any css attribute to hide it (most of them not work)
I do want to scroll but I don't want to see the scrollbar
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
I've tried it but it doesn't work in ion-content.
Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar.
Need to use CSS Custom Properties. Add styles to global scope.
ion-content {
// overwrite inline styles
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
In Ionic 4 you must use following, because Ionic use shadow DOM:
global.scss
.no-scroll {
--overflow: hidden;
}
and in page
<ion-content class="no-scroll">
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
ion-content {
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
overflow: scroll!important;
height: 100%!important;
}
The <ion-content> is a custom element with shadom DOM. There's something called the ::part pseudo element to target an element in a shadom DOM element.
If you look at the shadow dom, you will see this:
Take notice of the part="scroll". Ionic did add parts to their elements that we can use via the ::part pseudo element to target this and apply our custom css to hide the scrollbar:
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
Tested this on iOS and Android successfully. I'm not getting it to work on Chrome though.
Try this, seems to work fine so far while preserving all functionality in Ionic 5.
// variables.scss
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
I have confirmed the following solution works in Ionic 5 although i do believe this should work in Ionic 4 as well.
As others here have noted, the scrollbar which controls the scrolling of content inside of an ion-content component exists in the shadow DOM within it and thus you need to target the scrollbar using ::part() CSS pseudo-element.
In your global style sheet add the following css declarations which will hide the scrollbar while retaining the ability to scroll:
/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
/* firefox */
ion-content::part(scroll) {
scrollbar-width: none;
}
Thank you #rostislav
Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)
solution: add these lines to both global.scss and variables.scss:
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
NOTIC: then clear browser cache and refresh page, it's great!
but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!
Refactored #Sergey Oleynikov solution and it worked perfectly for me
ion-content {
// overwrite inline styles
// --offset-bottom: auto !important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
Here is a hack? https://github.com/ionic-team/ionic/issues/17685
<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>
I couldn't find a reliable way to do this using the previously mentioned methods, they either didn't work or stopped the scrolling all together. My approach was to make the ion-content window wider than the screen.
.noscroller {
left: -10px;
width: calc(100% + 20px);
}
if you want to remove the scroll dynamically. You can use the approach of removing the scroll-y class from shadowDOM at <main class="inner-scroll scroll-y"></main> within <ion-content></ion-content>.
Firstly, import { Renderer2 } from '#angular/core' in your constructor(renderer: Renderer2)
To reach this, in your your-component.component.ts at event cycle ngAfterViewInit or onward.
This will remove the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
This will add the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
The Code from spicemix worked! I pasted the code in global.scss and not in variables.scss
/* global.scss */
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
For me it works after adding the no-scroll class in the <IonContent> element, as mentioned above, and after adding the following lines
useEffect(() => {
const style = document.createElement("style");
style.innerHTML = ".inner-scroll.scroll-y.overscroll { overflow: initial; }";
ionContent.current.shadowRoot.appendChild(style);
}, []);
Then in the render <IonContent ref={ionContent} className="no-scroll">...</IonContent>
The thing is that in these classes inner-scroll and scroll-y there is a overflow: hidden; style so we just have to override it.
I believe you can use
slot="fixed"
to make the element fixed thus removing the scroll bar by default for you.
Refer ionic documentation
I am trying to add additional toggleable section that user can show and hide.
My requirements:
supported on major browsers (Opera, Chrome, Edge, IE11, Firefox, Safari on Mac)
no javascript
And was thinking of using the <details> tag, however the code
<details>
<summary>Toggle</summary>
<p>Hideable</p>
</details>
does not work on the Edge / IE browsers.
Can I anyhow "make" it work, or is there anything else I can use for that task? Hacks are OK, as long as no javascript is present.
You can add a polyfill once on a page to make all the <details/>s on the page work:
<!-- Inside the body -->
<script src="//cdn.jsdelivr.net/npm/details-polyfill#1/index.min.js" async></script>
I know this is a JS solution but it doesn't require writing any JS for each individual <details/>. It can be used with a text written in a WYSIWYG editor.
This would be the suggested :checked method utilizing a hidden checkbox:
.toggler {
display: none;
}
.toggler+.toggler-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all .4s ease-in-out;
}
.toggler:checked+.toggler-content {
max-height: 1000px;
opacity: 1;
}
<div>
<label for="toggler-id-1">Toggle</label>
<input type="checkbox" id="toggler-id-1" class="toggler" />
<div class="toggler-content">Hideable</div>
</div>
I would still prefer going with #Finesse's solution because it allows you to use the semantically correct HTML element for the purpose.
Copy the below script and put it in a js file and then import it or write it directly in tags. This worked for me.
!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():t()}(0,function(){var o="details",i="summary";(function(){var e=document.createElement(o);if(!("open"in e))return!1;e.innerHTML="<"+i+">a</"+i+">b",document.body.appendChild(e);var t=e.offsetHeight;e.open=!0;var n=t!=e.offsetHeight;return document.body.removeChild(e),n})()||(document.documentElement.className+=" no-details",window.addEventListener("click",function(e){if("summary"===e.target.nodeName.toLowerCase()){var t=e.target.parentNode;if(!t)return;t.getAttribute("open")?(t.open=!1,t.removeAttribute("open")):(t.open=!0,t.setAttribute("open","open"))}}),function(e,t){if(document.getElementById(e))return;var n=document.createElement("style");n.id=e,n.innerHTML=t,document.getElementsByTagName("head")[0].appendChild(n)}("details-polyfill-style","html.no-details "+o+":not([open]) > :not("+i+") { display: none; }\nhtml.no-details "+o+" > "+i+':before { content: "▶"; display: inline-block; font-size: .8em; width: 1.5em; }\nhtml.no-details '+o+"[open] > "+i+':before { content: "▼"; }'))});
If you don't want that arrows then just remove this part from end
+o+" > "+i+':before { content: "▶"; display: inline-block; font-size: .8em; width: 1.5em; }\nhtml.no-details '+o+"[open] > "+i+':before { content: "▼"; }'
I am trying to make a box appear when the user hovers over a separate box. I am having trouble getting it to work.
Here is the html
<div class="division_left" id="account">
<div class="container"></div>
<span>Account</span>
</div>
and here is the css
#account:hover + .container {
visibility: visible;
}
.container {
position: absolute;
visibility: hidden;
height: 300px;
width: 500px;
bottom: 40px;
left: 40px;
background-color: #fff;
border: 1px solid #000;
}
again I am trying to get the container to show when #account is hovered over. It just is not showing up. Thanks in advance!
The element #account is a parent of .container rather than its sibling - you need the 'direct descendant' selector, >, rather than the 'adjacent sibling' selector, +, i.e.
#account:hover > .container {
visibility: visible;
}
Instead of
#account:hover + .container {
visibility: visible;
}
Support for the 'direct descendant' selector is as follows:
IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf
5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60
Live example
This is what you're after DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/
div {
display: none;
}
a:hover + div {
display: block;
}
.container isn't a sibling of #account its a child so you need to instead use the direct child combinator >
#account:hover > .container
jsFiddle
Why not use JQuery Hover function instead? Much better and stable than anything else. you can play with effects as well.
HTML :
<div class="division_left" id="account">
<div class="container" style="display:none"></div>
<span id="showAccount">Account</span>
</div>
JQuery :
$('#showAccount').hover(function(){
$('.container').toggle('fade');
});
This will give you much better effect than regular CSS.
Try it and let me know..
Or I will add JSFiddle if you need.
Update : http://jsfiddle.net/V8QbY/ - Here it is
Regards,
Rahul.