I use Quill, and I use a scrollbar plug-in in it, but the original scrollbar of Quill still exists. That's no effect with overflow: hidden. How can I hide it?
Two overlapping scrollbars
It's pretty hard solve the issue without actually seeing the code but here's what worked for me.
.ql-container, .ql-editor{
height: auto;
}
That's it, now the quill scroll bar should disappear and in absence of a secondary scrollbar attached, the .ql-container should auto grow fitting the content.
Related
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
I'm creating an AngularJS application which has a loader, but since angular is really fast (yay), the page jumps between the loadings (nay :/) - what happens, is when the loading screen comes up, the scrollbar gets hidden and when a new page loads, the scrollbar is put back, this creates a flickering in the menu(always visible) part on top of the page.
Same thing happens when I open a pop-up or smth. like that. I add overflow: hidden; to the body in DOM so the user can't scroll when a pop-up is opened, but again this hides the browser scrollbar and the page jumps.
Any ideas how to solve this UX problem?
Ok, found a rather simple solution
html {
height: 100.001%;
overflow-y: scroll;
}
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
I'm having an IE7 issue with a website i'm working on - www.mini-meals.co.uk
Basically, the background image is not showing on behind the form on the 'Free Trial'
panel, and is disappearing when I scroll down on the others.
I've tried adding position:relative; on a bunch of elements but it doesn't seem to
make a difference.
Any ideas anyone? thanks.
Add this style to your page to see if you are experiencing an issue with hasLayout:
.panel .panel-wrapper { zoom: 1; }
If this does correct your issue than a more "standard" way of correcting the background rendering would be to set an explicit width to those same ".panel-wrapper" items.