Tips on avoiding vertical overflow while permitting horizontal overflow

I have been working on implementing a zoom feature for images, along with displaying a set of thumbnail images at the bottom of the zoomed image. While the zoom functionality is working correctly, I am facing an issue with the overflow of the tiny images. I want the images within the div (other_media) to avoid vertical overflow, but allow horizontal overflow so that users can scroll only left and right. Below is the HTML and CSS code for the thumbnail images:

#listing{
    float:left;
    height:80px;
    width:80px;
    margin:2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
<div id="other_media">
   while($ots = mysql_fetch_array($other)){ ?>
      <div id="listing">
         <img src="<?php echo $paths; ?>" id="<?php echo $ots['class']; ?>" />
      </div>
   <?php } ?>
</div>
htmlcss

Answer №1

In case you require concealing literal vertical overflow:

overflow-x: scroll; overflow-y: hidden;

Otherwise:

#other_media {
    overflow-x: scroll;
}
.listing{
    height:80px;
    width:80px;
    margin:2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    display:inline-block;
}
<div id="other_media">
   while($ots = mysql_fetch_array($other)){ ?>
      <div class="listing">
         <img src="<?php echo $paths; ?>" id="<?php echo $ots['class']; ?>" />
      </div>
   <?php } ?>
</div>

Answer №2

http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

To achieve the desired effect, simply configure the following CSS properties:

#listing {
    overflow-y:hidden;
    overflow-x:scroll;
    ...
}

UPDATE: Take a look at the improved explanation provided by TylerKendrick's response.

Answer №3

Have you experimented with the overflow-x and overflow-y properties? 

overflow-x:visible;
overflow-y:hidden;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launching a Dialog in Angular upon selection of an option

Within my application, I have a mat-form-field that includes a mat-option. My goal is for a dialog to open whenever I select an element from the mat-option. However, at the moment, nothing happens when I make a selection. What steps should I take to resolv ...

javascripthtmlangulartypescript

"Interactive demonstration" image toggle through file upload

I have a project to create a "demo" website for a client who wants to showcase the template to their clients. A key feature they are interested in is allowing users to upload their logo (in jpg or png format) and see it replace the default logo image insta ...

phpjavascriptjqueryhtmlajax

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

javascripthtmlangularangular-material

Issue with exporting VueJS-generated HTML containing checkboxes results in loss of checkbox checked state

In the template of my component, I have a checkbox code that looks like this: <div ref="htmlData"> <input type="checkbox" class="mycb" :id="uniqID" :disabled="disabled" v-model="cbvalue" > &l ...

htmlcheckboxvue.jsvue-component

Having difficulties with DIV elements

Having some difficulty creating a webpage with divs. The site I'm working on is similar to the old Myspace, so CSS can't be used in the code. Attempting to create tables using DIV elements but facing some issues. This is what my page currently l ...

html

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

javascripthtml

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

In my PHP code, I have successfully created dynamic buttons. However, I am facing an issue where I need to retrieve the value of a specific button when it is clicked, and populate all the information in a form. Below is the code snippet for handling the b ...

javascriptphphtmlcss

I am interested in updating the color of the active item on the navbar

I am looking to modify the color of the active page, Here is the HTML code snippet: <html> <head> <title>John Doe - Portfolio</title> <link rel="stylesheet" href="custom-style.css"> <link rel=" ...

htmlcss

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

javascripthtmlnode.jsvue.js

Tips for retaining and showing previously inputted information in form fields

I have 2 forms on each page. Here is an example of one of them. $('form').submit(function(e) { e.preventDefault(); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" me ...

htmldjangodjango-formsdjango-templatesdjango-views

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Performing code execution in MVC 5 View every 1 second

I am currently working on a MVC 5 web application and I have a question regarding performing real-time calculations in the view. Below is an example of my view code: var timeRemaining = Model.account.subscriptionEndDate - DateTime.UtcNow; Is there a way ...

htmldatetimerazorasp.net-mvc-5asp.net-mvc-views

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

javascripthtmljquerycsssorting

Methods for activating touch-like scrolling through the use of mouse grabbing and dragging

Let me show you a simple illustration of the task I'm attempting to accomplish: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

javascripthtmlcssscrollscrollbar

Utilize Flexbox and Material UI to position Item at the bottom of the layout

I'm attempting to include Unassigned Text at the bottom of my Container, following the layout shown in this mockup:https://i.sstatic.net/863cl.png Here is the code I currently have. I'm facing difficulty in getting the border between the play bu ...

cssreactjsflexboxmaterial-ui

Locking mat-toolbar and mat-tabs to the top in Angular Material 2

As I work on my website, my goal is to fix the < Mat-Toolbar > at the top of the screen and then directly underneath that, lock the < Mat-Tabs >. The challenge I'm facing is that the position: fixed in CSS is not working as expected. When ...

javascripthtmlcssangularangular-material

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml

Focusing on the initial element following CSS prioritization

Check out this codepen link: http://codepen.io/muji/pen/XpEYzO I am looking to target the first element after it has been sorted using a CSS "order" property and apply another CSS property to it. Is there a way to use jQuery or any other method to identi ...

javascriptjquerycss

What is the best way to pinpoint the origin of the element.style being injected by JavaScript?

I've been tasked with updating a client's WordPress website, but I'm still getting acquainted with the overall structure of the site. When looking at the blog page (), I noticed that posts are displayed within a wrapper labeled #blogleft, a ...

javascripthtmlcssweb-inspector