I have page with header, footer and single table with fixed header. See code in sandbox (open results view in new window)
code sandbox
I want to stretch rows section, that have own scrollbar, to avoid page vertical scroller appearance.
Caused by document margin (made a reset for that) plus u used 100vh on Demo causing the document margin to overflow.
reset.css
html,
body {
margin: 0;
}
try this https://codesandbox.io/s/material-demo-forked-xmknq?fontsize=14&hidenavigation=1&theme=dark
Related
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 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.
When I press a button, my app displays a calendar (within a Dialog) that slides from the bottom of the screen:
I want the Calendar to occupy the whole width of the screen, but it shows some white padding on both sides and also on the top and bottom (It is white because the "Dialog" UIID has a white created image as background)
I have tried changing all the UIID related to Dialog: "Dialog", "DialogBody", "DialogTitle", etc. I set all margins and paddings to cero.
How can I get rid of that padding?
Try change both the DialogUIID and the UIID of the dialog. Also make sure your calendars margin values are set to zero. It could be that your calendar is too small. Try placing it in a table layout with 1 row and 1 column then in layout constraints set the width and height to 100%
Open up the Component Inspector tool and traverse the hierarchy. You will be able to see all the components and their UIID's within the hierarchy and you should be able to understand which one of those components contributes to the padding/margin.
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen