CSS - Overflowing content within a popup container

After creating a webapp, I encountered an issue with the overflow of child elements .popupRole that are not functioning properly. The intended behavior is for them to be visible until reaching the .popupFooter, after which they should become scrollable using a scroll bar (overflow: scroll). Unfortunately, I am unable to identify the root cause of this problem. Any assistance in resolving this matter would be greatly appreciated.

JSFiddle:

https://jsfiddle.net/22h1y2f9/2/

htmlcsspopup

Answer №1

To ensure the scrollbar displays properly, the height of the .popup should be less than the combined height of its contents and its parent element.

.popup {
  width: 400px;
  height: 250px;<--------------changed
  overflow-y: auto;
}

Check out the demo here

Answer №2

To ensure proper functionality, remember to include the overflow-y: scroll property in the css styling of popUpContainer instead of popUp. Additionally, it is recommended to avoid using position:absolute for the footer unless it is absolutely necessary (pun intended).

body {
  background-color: gray;
}

.popupOpen {
  float: right;
  vertical-align: middle;
  margin-right: 20px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.popupContainer {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: left;
  width: 400px;
  height: 300px;
  display: none;
  z-index: 1000;
  background-color: white;
}

.popupName {
  display: inline;
  margin: 5px;
  line-height: 35px;
}

.popupClose {
  text-align: center;
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 5px;
}

.popupHeader {
  height: 35px;
  background-color: #ff6000;
  margin-bottom: 5px;
}

.popup {
 width: 400px;
    height: 259px;
    overflow-y: scroll;
}

.popupLabel {
  display: inline-block;
  width: auto;
}

.popupBox {
  float: right;
}

.popupRole {
      height: 25px;
    width: 373px;
    margin: 5px;
    padding-left: 5px
}

.popupFooter {
  height: auto;
    position: relative;
    bottom: 4px;
    right: -5px;
}

#tab3 .popup {
  height: 320px;
}

#tab3 .popupFooter {
  position: relative;
}

.popupSubmit {
  float: right;
  margin: 5px;
  height: auto;
  width: auto;
}

#popupOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
}

.popupRole>input {
  width: auto;
}

.popupRole>.popupLabel {
  width: auto;
}

.UAtree,
.STtree,
.HAtree {
  text-align: center;
  height: 50px;
  padding-left: 10px;
  padding-right: 10px;
}

.selectRole,
.selectUser,
.selectManager,
.selectDeputy,
.selectEnvironment,
.selectHardware {
  height: 75px;
  padding-left: 10px;
  padding-right: 10px
}

.selectOS,
.selectDescription {
  height: 50px;
  margin-bottom: 10px;
}
<div class="popupContainer" style="display: block;">
  <div class="popupHeader">
    <h3 class="popupName">WAN</h3>
    <button class="popupClose" type="button" name="close">X</button>
  </div>
  <div class="popup">
    <div class="popupRole">
      <div class="popupLabel">Responsible</div>
      <input type="checkbox" class="popupBox" name="1" value="Verantworlichter">
    </div>
    <div class="popupRole">
      <div class="popupLabel">Developer</div>
      <input type="checkbox" class="popupBox" name="2" value="Developer">
    </div>
    <div class="popupRole">
      <div class="popupLabel">Ready</div>
      <input type="checkbox" class="popupBox" name="3" value="Bereitschafter">
    </div>
    <div class="popupRole">
      <div class="popupLabel">User</div>
      <input type="checkbox" class="popupBox" name="4" value="Anwender">
    </div>
    <div class="popupRole">
      <div class="popupLabel">SystemAdmin</div>
      <input type="checkbox" class="popupBox" name="5" value="SystemAdmin">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="6" value="Roller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="7" value="toller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="8" value="voller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="9" value="fresh">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="10" value="beat">
    </div>
  </div>
  <div class="popupFooter">
    <button class="popupSubmit btntypA" type="button" name="save">save</button>
  </div>
</div>

Answer №3

.modalBox {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  width: 500px;
  height: 350px;
  display: none;
  z-index: 1500;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: lightgray;
}

Use this style for your .modalBox element in the CSS file.

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

Tips for sending multi-dimensional arrays in an HTML form via request?

I have created a form where users can select products and enter the quantity for each product. Here is the structure of my form: <select name="products[][product_id]"> @foreach($products as $product) <option value="{{ $ ...

phphtmllaravel

What determines the node that is returned when a selector in a querySelector call matches multiple nodes?

I encountered a scenario where I needed to focus on either an input tag, if it was present, or its container if it wasn't. To tackle this issue, I devised a clever solution: document.querySelector('.container input, .container').focus(); I ...

javascripthtmldomselector

CSS sticky element not preserving its parent's styles

Hello everyone, I need some assistance with a CSS sticky property issue I am encountering. When I apply the sticky property to a div and scroll down, it doesn't retain its parent's properties as expected. Here is the scenario: I have a Bootstrap ...

javascripthtmlcssbootstrap-4

Achieve full height of parent with rotated text

Hey, I've been experimenting with some CSS transforms and I'm having trouble getting this to work properly. Check it out here I'm using Bootstrap 4 to create two columns; an image on the left and text on the right. I want the text to be ce ...

htmlcssflexboxbootstrap-4

extract the chosen option from the dropdown menu using AngularJS and input it into a text field

Hello! I am a beginner in AngularJS and currently working on creating a unit converter demo app. My app consists of two dropdowns for selecting the source and destination units. I need help in getting the selected values from the dropdowns into an input fi ...

javascripthtmlangularjs

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

The script will not alter the color of a generated div element

section of code, there is a script called BGLinks that handles linking Bible verses to BibleGateway and creating preview popups when hovering over them. The issue at hand is with the css styling of the popup content within the div with the class "bg_popup ...

javascriptcss

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order? Check out this code snippet: <div className="flex mx-auto justify-center items-center" ...

cssreactjstailwind-css

What steps should I take to eliminate the black border around my input fields?

I recently noticed that there are black boxes around the input area on the form I am creating. Is there a way to remove them? I am using bootstrap, so I'm not sure if that is causing the issue. Any suggestions would be greatly appreciated! https://i.s ...

htmlcssbootstrap-4

Eliminating gaps between elements

I recently delved into the world of web design, and although I have a basic understanding of HTML and CSS, I am determined to enhance my skills and knowledge by creating a standard home page. So far, I managed to create a standard navigation bar, and now ...

htmlcsstwitter-bootstrap

Using Zurb Foundation to enable horizontal scrolling on an iPad

This is my first experience building a website with the Zurb Foundation framework, and so far, it's been a pretty smooth process. However, I'm encountering an issue when testing the site on an iPad in portrait orientation - there seems to be som ...

cssipadgridresponsive-designzurb-foundation

Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow. Upon furthe ...

javascriptcssgoogle-mapsinfowindow

Tips on how to centrally align input forms:

On my webpage, I have a drop-down menu, 3 text boxes, and a submit button. Currently, they are aligned to the left but I would like to align them in the center. I am using Bootstrap CSS in my code, but I am new to this field. Can someone please guide me on ...

htmlcss

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

javascripthtmlangularjsdom

The issue with background image sizing persists on Internet Explorer version 8

Here is my HTML code snippet: <div id="content_main"></div> This is the accompanying CSS for styling the content main section: #content_main { width: 1024px; height: 150px; background: url('../images/Orange.jpg'); b ...

htmlcssbackground

The array is producing accurate results, however it is displaying as undefined in the HTML output

I have encountered a problem while working on my project. I am utilizing an API to fetch an array of platforms where a video game is available. Although the array is returning the correct data, I am facing difficulty in displaying these values in my HTML a ...

javascriptjqueryhtmlarrays

The hierarchy of styles in Rails CSS/SCSS

I'm currently exploring the concept of css precedence rules in rails. In my application, I am looking to apply different css rules based on different controllers. However, when I add css to one of the css.scss files, it ends up affecting all controll ...

cssruby-on-railsruby-on-rails-3sass

Comparing Traditional Tables to Div Tables

Is this process: <table> <tr> <td>Hello</td> <td>World</td> </tr> </table> Achievable with the following code? <div> <div style="display: table-row;"> <di ...

cssperformancehtmlhtml-table

Tips for maintaining variable values when invoking PHP functions

After setting a global variable value in a PHP functions file and successfully using it within one PHP file, I encountered an issue when trying to access the same variable from another PHP file using include("functions.php"). This is the process I followe ...

phphtml

Unable to successfully send multiple values from input fields using forms in PHP

I am currently facing an issue with my HTML form that contains a field consisting of multiple selection boxes as shown below: <div class="form-group"> <select multiple name="Fee[]"> ...

javascriptphphtml