My goal is to have the div ".slide" scroll horizontally only, but for some reason, the entire body is scrolling instead. I'm not sure why.
If you resize the page to mobile and try scrolling horizontally, you'll see what I mean.
Within the div.slide, I have applied the following CSS:
float: left;
width: 620px;
overflow-x: scroll;
background: #ecf2f6;
You can observe the issue here!
To create a scrollable section for your slides, you'll need to nest the .slide class inside another element and apply the CSS property overflow-x:scroll to that wrapping element.
Here's an example:
<div class="slide-wrap">
<div class="slide">
....
</div>
</div>
.slide-wrap {
width: 100%;
overflow-x: scroll;
}
I've quickly put together a demo showcasing this concept. Since jsFiddle isn't working at the moment, you can view the demo on CodePen:
http://codepen.io/anon/pen/bpGdo
.slide-wrap {
border: 1px solid black;
width: 320px;
overflow-x: scroll;
}
.slide {
width: 640px;
height: 320px;
}
.box {
float: left;
width: 300px;
height: 300px;
margin: 10px;
background: red;
}<div class="slide-wrap">
<div class="slide">
<div class="box">1</div>
<div class="box">2</div>
</div>
</div>One way to stop horizontal scrolling is by using the CSS property overflow-x: hidden;
To enable the vertical scrolling feature on div.slide or its parent container, you must specify a height.
Give this a try:
.slide {
background: none repeat scroll 0 0 #ECF2F6;
float: left;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
width: 620px;
}
By setting a specific height, the div.slide will only scroll vertically. The horizontal scrollbar appearing on mobile devices is likely due to the content exceeding the page width (specifically, 2 divs with the app-ad class).
To achieve vertical scrolling: You need to set a specific height for the container ".slide", which should be less than the actual content height.
For horizontal scrolling: Ensure that the width of the container ".slide" is narrower than the content width.
Here's an example:
.slide {
height: 500px;
overflow-y: scroll;
}
If you want to achieve an overflow-x scroll effect, make sure that the width of your parent element is smaller than the child div inside.
Here's how you can set it up in your HTML:
<div class='box'>
<div class='content'>Your content here</div>
Your content here
</div>
And here's the CSS to go along with it:
.box{width:80%;}
.content{width:120%;overflow-x:auto;}
I've come across the following snippet of code: export const ErrorBlur = { width: '95.8%', height: '100vh', backdropFilter: blur('10px'), backgroundColor: 'rgba(124, 146, 153, 0.29)', }; However, an er ...
I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...
Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right s ...
I am facing an issue with my video implementation where the poster image is not returning after exiting full screen mode. I have a video with overlay content that requests full screen when the user clicks a custom play button. When the user exits full scre ...
Despite hours of research and following various links, I am still experiencing a problem where my page continues to load after logging out and clicking the back button. Below is the code I have tried for my log out page: protected void Page_Load(object se ...
<input type="datetime-local"> While this input retrieves the local time from your PC, I'm curious if there's a way to make it display as US time specifically. ...
I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are: 1)Bootstrap carousel reveal part ...
I am trying to calculate the total height of multiple containers and subtract it from a value (for example 1000) that needs to be set as a CSS value (in this case, 1000px). However, when I perform the calculation, I encounter the NaN error. I need a solu ...
Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...
Encountering an issue with the French language on a website I'm currently developing ... Specifically, there are menu bars, tabs, and text within each tab involved. Upon setting charset=ISO-8859-1, the body text functions correctly, but the menu bar ...
Struggling with PHP code utilizing fopen to write text lines into a textarea and save them to a .txt file. Below is the code I've been working on, hoping to get some assistance! <?php session_start(); if (!isset($_SESSION['username&ap ...
I have a unique situation where I am dealing with a table containing multiple tables for various users. The number of users can vary, so I am aiming to create a dynamic solution. Below are two sample tables for reference. <div class="timecard"> < ...
I am currently in search of a web hosting provider for a website I have created. The site features some performance-heavy animations, particularly due to a fullscreen slider with filter and scaling transitions. I need a provider that can ensure optimal per ...
My primeng table is quite large: <p-table #dt [value]="artefacts" [columns]="cols" [paginator]="true" [rows]="numberRows" [tableStyle]="{'table-layout':'auto'}"> With so many entries, the table spans over 100 pages. However, the ...
I am currently developing a web application that will monitor the user's location. I want to ensure its reliability, so even if the user loses internet connection, the application will continue tracking their location (since GPS does not rely on inter ...
I'm currently working on a project using Symfony2 (v2.3.6) and I wanted to utilize the auto-generated HTML5 constraints in my form. For this purpose, I created a simple form with just one field that has a RegEx constraint: public function formAction ...
I've encountered an issue with my simple css tabstrip. It seems to render correctly in: Safari 5.0.2 on Mac IE8 on PC FireFox 3.8.12 on PC However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the containe ...
My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...
Imagine having this HTML snippet: <div class="test"> <div class="class1"> <input type="text" data-required="true"/> </div> <input type="text" data-required="true"/> </div> I'm looking to select ...
I have been searching for a solution to this particular question on different platforms, including Stack Overflow. However, I am looking for an answer using pure JavaScript only, so please avoid jQuery solutions. In order to provide context, I have includ ...