Encountering issues while attempting to add vertical scroll to a div

Trying to add horizontal scrolling to a div that contains two separate divs, each with a width of approximately 4080px. One of the divs holds a table with headers, while the other div has <td> elements in <tr>. I need to enable vertical scrolling on the second div so that I can view the entire table data.

<div class="CodeMirror cm-s-default CodeMirror-wrap">
  <div class="CodeMirror-vscrollbar"   cm-not-content="true" style="display: block; bottom: 0px;overflow-y: hidden;">
    <div id="Table">
      <!--<div class="CodeMirror cm-s-default CodeMirror-wrap" style="height: 50px;">-->
      <!--<div class="CodeMirror-vscrollbar" cm-not-content="true" style="height: 50px;overflow-x: hidden;overflow-y: hidden;">-->
      <!--<div style="width: 100%;">-->
      <table >
        <tr>

          &...
                  

        </tr>
      </table>
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="CodeMirror-vscrollbar" [class.tableDiv]=hideDiv  id="small"  cm-not-content="false" style="display: block;width: 100%;bottom: 0px;overflow-x: hidden;">
        <table >

          <tr *ngFor="let obj of podData;let i=index">

            <td style="border: 1px solid black;text-align:center"><div style="width: 82px;">{{obj.ZoneName}}</div></td>
             ...
                   
                  
            </th>
          
                     ...

 
           </table>
      </div>
    </div> 
</div>

htmlcss

Answer №1

To include a vertical scrollbar in your div, simply insert overflow-x: auto; into the code.

If you want scrollbars on both sides, consider using overflow: auto;.

For a demonstration of this in action, check out this example

Answer №2

To create vertical scrolling for a div with the ID "small," you can use the CSS overflow property and style it as follows:

display: block;width: 100%;bottom: 0px;overflow-y: scroll;width:4080px

For horizontal scrolling, apply the following CSS styles to the same div with the ID "small":

display: block;width: 100%;bottom: 0px;overflow-x: scroll;width:4080px

If you want both vertical and horizontal scrolling for the same div, you can use these CSS properties:

display: block;width: 100%;bottom: 0px;overflow: scroll;width:4080px

See the code snippet below:

<table id="t1">
... (Table content omitted for brevity)
</tr>
</table>

<div class="CodeMirror-vscrollbar" [class.tableDiv]=hideDiv id="small" cm-not-content="false" style="display: block;width: 100%;bottom: 0px;overflow: scroll;width:4080px">
  <table id='t2'>
    ... (Table content omitted for brevity)
  </table>
</div>

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

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

javascripthtmlajaxflask

Substituting Meta Viewport tag with alternative CSS method for HTML emails

In an effort to improve support for legacy Blackberrys, we made the decision to take out the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails. Some major email test ...

csswindows-phone-7html-emailmetaemail-templates

Creating Static Content using Spring Framework

I need some help with handling static content in my SpringMVC app. Currently, I am using the following configuration: <mvc:resources mapping="/resources/**" location="/resources/" /> This setup works well for uploading and retrieving images within ...

cssspringmodel-view-controller

Does CSS include a shadow child operator?

Did you know that Google Chrome has a special feature called the shadow descendant combinator /deep/? This unique combinator allows for the selection of elements within shadow nodes. body div {...} // this doesn't target descendant divs inside shadow ...

cssgoogle-chromecss-selectorsshadow-dom

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

cssvue.js

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

Tips for styling the chosen option in a dropdown menu with <ul> and <li> tags

I am having trouble logging the selected dropdown value to the console in this code snippet. HTML <div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" ...

javascripthtmlangular

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

javascripthtmlcss

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

javascriptcssruby-on-railspathassets

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

javascripthtmlonclickeventhandler

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

I am a beginner with TinyMCE and I am working on integrating the editor into my Laravel project. So far, I have managed to get it up and running, but I am struggling with retrieving the content from the editor and passing it to the controller for database ...

phphtmlmysqllaraveltinymce

Pictures are overflowing from the table

I'm facing a challenge with my homework assignment... I am relatively inexperienced with HTML/CSS and can't seem to figure out why my images are overflowing from the table cells regardless of their sizes... Table snippet: <div class="secti ...

htmlcssimagehtml-table

Can we guarantee that all buttons in a button group are identical?

How can I make sure that two radio buttons in a button group have the same width? <div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class=" ...

htmlcssbootstrap-5

Subnav sticks when scrolling down but becomes unresponsive on resizing

My webpage has a main header that sticks to the top of the window and a subnav fixed at the bottom. The hero image adjusts its height based on the window minus the header and subnav heights. When scrolling past the subnav, it sticks just below the main nav ...

jquerycss

Resetting the randomness in a function within a sudoku generator implemented in JavaScript

I'm in the process of creating a unique Sudoku generator that incorporates randomness into its design. Within my code, there's a particular function responsible for generating the Sudoku puzzles. The issue I'm encountering is the inability t ...

javascripthtmlsudoku

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

phpjavascriptjqueryhtmlcss

Connecting to particular sections on other pages

My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...

html

Is it possible to add a class to the parent element when the input value of a sub-child element is

Is there a way to select and add a class to an li element in which the sub-child input is empty when clicking on button #btn-modal-clear? If so, what is the best approach to achieve this? Example HTML Code: <li>...<li> <li> <a c ...

javascriptjqueryhtmlcss

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss