I'm using https://github.com/vaadin/gwt-polymer-elements
Vaadingrid is really good.
This time I have a trouble about horizontal scrollbar of vaadingrid.
If the width of the content wider than the width of the browser.
When using on Macbook(TOUCH PAD), Mobile device it works fine.(like the image below)
http://imgur.com/GHyLrUq
However, when using it on computer(with MOUSE), it can't be scrolled.
No default horizontal scrollbar is shown up.
,,,
I tried to set "visibility: visible".
http://imgur.com/XwqpPRV
But it will always be overwrite by element.style
http://imgur.com/VgUCLuN
Hope someone can help me out.
I have found this fix:
You can edit vaadin-grid.html(located /bower_components/vaadin-grid/) and change this:
.vaadin-grid-tablewrapper {
box-sizing: border-box;
overflow: hidden;
outline: none;
position: absolute;
z-index: 5;
}
for this:
.vaadin-grid-tablewrapper {
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
outline: none;
position: absolute;
z-index: 5;
}
This is valid for me because vertical scroll can be used with mouse scroll.
I'm new in polymer and I don´t know how to modify css child element from parent, and that is the reason because I'm modifing the vaadin source directly.
Related
I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:
Navbar CSS:
position: fixed;
width: 100%;
top: 0;
Command Line:
margin-bottom: 60px;
Body Text:
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;
I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.
I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.
You can limit the height of the container in which the text is to a specific height and then set the overflow on the y axis to scroll, this will result in the behavior you want because the scroll is limited to the container div, thus the text won't scroll through the navbar.
Remember to adjust the margin from the top accordingly so it starts under your nav and command bar.
Example (assuming your navbar is 10vh):
#text-container {
height: 90vh;
margin-top: 10vh;
overflow-y: scroll;
}
If your navbar is for example 100px you could do:
height: calc(100vh-100px);
margin-top: 100px;
This would correct the height so it will always fill your whole screen.
If a horizontal scrollbar appears you can hide this with overflow-x: visible; or overflow-x: hidden;depending on the behavior you want
To start with an offset on the body text just give it a margin-top which is the same height as you nav bar, i.e.
margin-top: 50px;
This will give your body an initial spacing before it starts, after the user starts scrolling it'll
.full_width {
position: relative !important;
z-index: 5000;
}
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
I know this has been covered a lot here, but none of the solutions seem to work for me. The scrollbar is still showing up on Windows OS (Firefox, Edge & IE).
Note: I don't want to mess with padding/margins
I can make it disappear but I loose scroll functionality. Here are some of the things I have tried and I may forget a few since I have gone through so many iterations.
::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;
There have been a few others as well, but like I said, nothing is working. I did see some common solutions being altering the padding to faux disappear the scroll bar but I don't want to do this for fear it may break styling on some devices.
I also saw some suggestions to do pure javascript, subtracting child component width from parent component width or something like that but this was a very similar approach, just more dynamic which I also do not want todo.
I am trying to achieve this with pure CSS. Ideas?
Current code
.rec-left--body {
padding: 0px 20px;
.form-content {
overflow-y: scroll; // Chrome << removes scrollbar
overflow-x: hidden; // Chrome << removes scrollbar
-ms-overflow-style: none; // IE 10+ << removes scrollbar
overflow: -moz-hidden-scrollable; // Firefox << removes scrollbar
height: 48vh;
margin: 10px 0px;
padding: 0 15px;
#media (min-width: $screen-sm) {
height: 325px;
padding: 0 10px;
}
.form-content::-webkit-scrollbar {
width: 0px;
}
All you need to do for webkit-enabled browsers is
::-webkit-scrollbar { display:none }
I don't believe there is a pure CSS way to do this in firefox, as it doesn't currently support scrollbar customization. see related for the way to do it with padding, which might be your only option:Hide scroll bar, but while still being able to scroll.
This will somewhat work
-ms-overflow-style: -ms-autohiding-scrollbar;
But does not hide once the user scrolls. A better method would be to place your content in a parent div where overflow is hidden, but allow scrolling within your child div.
I know you said you did not want to mess with padding or margins, but I felt the same, I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.
This worked for IE11, FF60.9 and Chrome 80
body {
-ms-overflow-style: none; /** IE11 */
overflow-y: scroll;
overflow-x: hidden;
margin-right: -20px;
}
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
I am working on testing a site on all browsers before starting device adapting with media queries.
I have found an issue: when any element is dynamically affected, the overflow:hidden property does not work anymore for that element on Chrome.
You can see it here: http://germanalvarez.net/5/
After loading the site, click on the MENU button on the bottom right of the panel, and click on any section:
If you are in Chrome, the top part of the panel (classified as .titlePanel) will no longer remain overflow:hidden, so the overflowed part of the icon will go out of the titlePanel (see image). This only happens when changing section.
If you are in Firefox, even after changing section it will remain hidden, so here, it works OK.
I found a supposed solution on the web: style elements on its tag. If you check my code you'll see .titlePanel has this opening tag, but it doesn't work either:
<div class="panel titlePanel expanded" style="overflow: hidden;">
This is caused by the use of position: fixed :
.titlePanel [class^="icon-"]:before,
.titlePanel[class*=" icon-"]:before {
font-size: 16em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: fixed;
}
As you're using fixed, your pseudo-element is totally out of the flow. It's no longer affected by any overflow: hidden on its parents.
To fix it, remove this fixed position and use absolute instead :
[class^="title-"] {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
[class^="title-"] i {
position: absolute;
right: 0;
top: 0;
}