I trying to insert content into horizontal scrollable div using this code:
<div id="scrolly">
<div id="chartdiv_hourly" class="vh72" style="width:200%;">
</div>
</div>
#scrolly{
width: auto;
overflow: auto;
height: auto;
white-space: nowrap;
}
chartdiv_hourly
width: 200%;
overflow: hidden;
text-align: left;
Problem is that i cannot scroll horizontally on real device.
I tried to find any solution and i found:
https://github.com/davidaurelio/TouchScroll
But library seems to be obsolete, so i trying to find solution in pure CSS, is it possible?
Thanks for any help..
You are using automatic overflow.
Use this:
overflow: scroll;
Good Luck.
'scrolly' will need to have an absolute width set. Set to auto, I would expect it to just grow to fit the child content.
Related
I have an element that shows my GitHub contributions, this file has static width and to make it look nice on smaller devices I decided to use overflow-x set to auto to allow horizontal swipe with finger gesture.
I would like to see the scroll position to the very right by default so that the most recent contributions are being shown.
I assume it's not possible with CSS and I need to use some JS?
Here's the basic CSS that I wrote:
.my-github-contributions-chart-wrapper {
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
Here is what I want to achieve. Currently I have to manually scroll to the right.
I knew that I can do this in pure CSS. I forgot about rtl direction.
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: visible;
direction: rtl;
}
Simply apply direction: rtl; to the element with the overflow-x defined.
For some reason, I can't seem to get the mat drawer to occupy the remaining available height on the screen. I've tried:
.drawer-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
But I still get an overflow for some reason even though there's only one element on screen as indicated by the scroll bar:
And when I remove the CSS rules, I end up with this:
Basically about 10% of the screen height only. I've considered using a fixed height, but I'm guessing it would look cut off if viewed on a larger or smaller monitor. I'd appreciate any help as I'm really not familiar with the full properties of angular material and how to properly manipulate them. Thanks in advance.
in case any dropped by this and had a similar problem.
i fixed this long ago by applying
.drawer-container {
position: absolute;
top:0;
width: 100%;
bottom: 0;
}
just make sure the parent has a position: relative
Percentage based width/height is not yet supported by mat-sidenav i suppose.
try height: 100vh; instead.
that should work, but will add a scrollbar if there is any toolbar in your page.
UPDATE:
HTML:
<mat-drawer-container class="parent" autosize>
<mat-drawer mode="side">
Your sidenav content
</mat-drawer>
<div class="content">
Your main content.
</div>
</mat-drawer-container>
CSS:
.parent {
width: 100%;
height: 100vh; // calc(100vh - 64px) can be used if there is navbar at the top
}
.content {
height: 100%;
}
I am currently struggling with a site and I have no idea where to start on this bit of code.
I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.
Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.
The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.
Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?
Thank you
As I've written on a comment, here is a solution only with CSS.
#parent {
overflow-x: hidden;
width: 190px;
}
#container {
white-space: nowrap;
border: 1px solid #f0f;
width: 190px;
overflow-x: visible;
}
#container>div {
background: #ccc;
width: 50px;
height: 50px;
display: inline-block;
/* for IE6/7, remove if you don't need to support those browsers */
*display: inline;
zoom: 1
}
<div id="parent">
<div id="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
<div>fff</div>
</div>
</div>
I have a problem hiding the scrollbar on my page but I still want to be able to scroll.
I know I can use
::-webkit-scrollbar {
display:none;
}
, but its obviously not working on Firefox or other non-webkit browsers.
Ive read a lot of threads explaining how can I accomplish this, but i just cant get it to work.
Can someone help me with this?
Website: http://test.6f.sk/
html {
overflow: -moz-scrollbars-none;
}
or any other element where you want to disable scrollbars
The best answer I know of is to just position the scrollbars out of view:
.crop {
width: 300px;
overflow-x: hidden;
}
.scroller {
width: 300px;
height: 200px;
overflow-y: scroll;
/* Must be ≥ scrollbar width. Scrollbar width varies by
* browser, OS, and config, so don't be precise, choose
* something wider than any scrollbar.
*/
padding-right: 50px;
}
<div class="crop">
<div class="scroller">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
</div>
</div>
Also worth noting that ::-webkit-scrollbar { display: none; } produces buggy behavior in Safari (current version 11.0.1) when used to hide a horizontal scrollbar on a page with an enabled Back button.
I just encountered a strange issue on ie11. I am trying to create a fixed element that will scroll along with window scroll.
$(window).scroll(function() {
var scrollY=$(this).scrollTop();
$('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});
I have also created a fiddle of this:
https://jsfiddle.net/fyngwnz6/1/
(This is for replicating the issue, I know this particular case could be solved with a fixed element)
The code works flawlessly with no performance issues on every browser, except ie11. When using the scrollbar 'myelem' element scrolls with just a small jitter which becomes more obvious when using the mouse wheel. However, where you can really see the issue is when using the scrollbar buttons. It seems like the render of the scrolling has to finish in order for js to track the scroll.
I saw that there were issues with ie11 and smooth scrolling, but this is not the case here. Is there any kind of solution to this? Am I missing something?
edit: although I have an answer that seems to solve the issue, actually what I am looking for is a solution to elements that have overflow:hidden applies on them and the scroll is taken from an overflown element rather than body scroll; a similar scenario can be found here:
http://www.fixedheadertable.com/
If 'fixed column' is enabled in the example, then clicking on the scrollbars shows the jerkiness in the movement.
It seems like adding height: 100%; and overflow: auto; to the html, body elements removes the IE 11 issue:
JsFiddle Demo
[Edit]: Adding margin: 0; removes double scrollbars.
for edge use:
/*Edge - works to 41.16299.402.0*/
#supports (-ms-ime-align:auto)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative;
}
}
/*Ie 10/11*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative
}
}