When the parent div overflows, the child div remains hidden within the boundaries of the parent div

<section class="margin-top-30">
            <div class="row" style="position: relative;">
                <div class="col-sm-4">
                    <div class="lightbgblock" style="overflow-x:visible;overflow-y:scroll;">
                        <h3>
                            <i class="fa fa-list"></i> Categories
                        </h3>
                        <section>
                            <h5
                                style="background-color: orange; padding-left: 10px; border-radius: 20px; line-height: inherit;">
                                <strong>Private Events</strong>
                            </h5>
                            <ul id="private_events_list" class="listing_categories">
                                <li><a href="#" class="wedding_icon">Wedding</a>
                                    <div class="list_sub_categories container">
                                        <div class="row col-lg-12 col-xs-12">

                                            <table>
                                                <tr class="container">
                                                    <td>
                                                        <ul class="list-group col-lg-12 col-xs-12">
                                                            <li class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><label
                                                                class="checkbox-inline"><input
                                                                    class="checkbox-input checkByDef" type="checkbox">Marriage
                                                                    Halls/Kalyana Mandapams</label></li>
                                                            <li class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><label
                                                                class="checkbox-inline"><input
                                                                    class="checkbox-input checkByDef" type="checkbox" />Organizers</label></li>

I am trying to achieve a particular layout for displaying parent and child lists in the code above. The goal is to have the child list visible when hovering over the parent list, similar to the first image provided. However, I am currently facing an issue where the child div is not visible outside of the parent div, resulting in the second image display.

[[1

javascriptjqueryhtmlcss

Answer №1

After some experimentation, I was able to come up with a solution on my own. By setting the child list div to be static and adding overflow: auto to the parent div, I was able to enable scrolling within the parent div. Since the child div is positioned as static, it remains in the same position and is always visible.

Big thanks to @prasad for their helpful responses!

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

What is the best way to divide this string with jQuery?

Is there a way to use jQuery to split this specific string? "[10.072721346470422,76.32974624633789][[10.075854059674523,76.32043361663818],[10.073650930297095,76.32888793945312],[10.074918540288232,76.33090496063231],[10.073862198974942,76.33137702941895] ...

javascriptjquery

"Discover the power of D3.JS with three dazzling charts on a single page, plus a host of additional

As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...

javascripthtmlcssd3.js

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

I encountered the following error message: DOM Invalidate exception 11 This error is coming from the code snippet below, but I'm having trouble identifying the root cause. /*The coding style may appear pseudo-stylish with potential syntax errors*/ ...

javajavascriptwebsocketjetty

What could be causing ng-submit to not successfully transmit data?

I'm currently going through this Yeoman tutorial, but I'm encountering some issues. The new todo is not being added to the $scope.todos as expected, and I'm struggling to identify the reason behind it. You can access the code here: Upon c ...

javascriptangularjs

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

javascriptjqueryhtmltwitter-bootstrap

Commencing a New Ember.js Venture

I've recently started using Ember.js and I'm used to simply typing rails project33 to create a new Rails project. But with Ember, it seems like there are multiple steps involved: mkdir project43 && cd project43 npm install -g genera ...

javascriptember.jsnpmyeoman

Display options in Material-UI autocomplete only upon clicking the icon

Is there a way to display the options list only when clicking on the arrow icon as opposed to the textfield itself? I have reviewed the documentations without success in finding a solution. Example ...

javascriptreactjsautocompletematerial-ui

Unable to render HTML in Simple Product Name on Magento platform

Is there a way to include HTML in my basic product titles, such as: <strong>A.</strong> Product Title Name However, the frontend displays these HTML tags. Is there a method to enable parsing of all HTML tags? ...

phphtmlmagento

Different ways to contrast rows within ag-grid

I am in the process of comparing two identical rows within my ag-grid and emphasizing any variances between them. While most column values are matching, I wish to highlight any cell that differs from the previous row. Is there a means to achieve this in ...

htmlangularag-grid

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

Can the image be adjusted based on different time zones around the world?

How can I create an HTML banner that changes images based on the time of day? I want one image to display between 7pm and 6am, and another image during the rest of the day. I came across a helpful website that achieves this by changing the image according ...

javascript

Cleaning up HTML5 video content

I have been on the search for a solution that would allow me to "scrub" through HTML5 video. So far, I have not come across one and was considering developing my own. However, before diving into that process, I wanted to seek advice from the community here ...

javascriptjqueryhtmlhtml5-video

Unexpected addition of values to a list occurs when scrolling through a web element using Selenium

Having recently delved into Python, as well as programming in general, I am eager to extract data from a webelement that updates dynamically with scrolling using Selenium. A particular post on Stack Overflow titled Trying to use Python and Selenium to scro ...

javascriptpythonlistseleniumscroll

Retrieve the current URL using Jquery Ajax when submitting a form

I utilized the code provided by this resource to submit data from a form. The form contains fields for Lastname, Firstname, Mobile, VAT, Address, Streetno, Postcode, Email, and Notes. <form id="request" method="post" autocomplete="off" class="form-hori ...

phpjqueryajaxvalidation

Quick method to populate an array with elements

I need to populate an array with a large number of objects. Currently, my approach looks like this: let useVertices = []; const len = this.indices.length; for(let i = 0; i < len; i++){ let index = this.indices[i]*3; useVertices.push(new THREE.Ve ...

javascriptloopsthree.js

Is there a way in Material UI to dynamically update the border color of a TextField once the user inputs text?

Is there a way to style the border of a TextField only when it has text input? I am currently using the outlined version of the TextField, which displays placeholder text when empty. <TextField variant="outlined" /> So far, I have managed ...

cssreactjsmaterial-ui

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

javascriptjqueryhtmlcssnumbers

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

htmlcss

Why am I encountering an issue while trying to access req.user.id?

Having set up passport authentication on my express, node project, I encountered an error when trying to access req.user. The error message displayed is Property 'id' does not exist on type 'User'.ts(2339). Below is the relevant code sn ...

javascriptnode.jstypescriptexpresspassport.js

Display a custom error message containing a string in an Angular error alert

How can I extract a specific string from an error message? I'm trying to retrieve the phrase "Bad Request" from this particular error message "400 - Bad Request URL: put: Message: Http failure response for : 400 Bad Request Details: "Bad Request ...

javascripthtmlangulartypescript