Tips for dealing with a div that needs to be contained within another element with scrollbars?

I am facing an issue with a div that has specific dimensions (

height:x; width:y; overflow:auto;
) and displays the content of an article. The problem arises when the content exceeds the div's limits, causing a scrollbar to appear for navigation.

Within this div, there is a 'close' link styled with 

position: absolute; top: 20px; right: 20px;
, which features an 'x' to close the div using jQuery and animations. However, as I scroll through the article, the 'x' also moves along with the content, which is not the desired behavior. I want the 'x' to stay fixed in its position regardless of scrolling.

I attempted changing the position attribute to 'fixed', but this anchored the 'x' to the body of the page rather than within the div itself. Is there a solution to overcome this challenge without relocating the div outside the primary content?

<div class="box1">
  <a data-type="close">X</a>
  <div class="inner">
      //content//
  </div>
</div>
javascriptcsshtml

Answer №1

Adjust the wrapper's dimensions to match the inner scrolling div and apply position:relative;. Then, place the close button in an absolute position within the wrapper div with a higher z-index than the inner div.

View sample here

The updated code snippet based on your existing HTML structure:

.container {
    position:relative;
    height:100px;
    width:200px;
}

.scrollable-content {
    width:200px;
    height:100px;
    background:#f2f2f2;
    overflow:auto;
}

.close-button {
    top:0;
    right:0;
    position:absolute;
}

Answer №2

It seems like you are already aware that adding overflow: auto; to the .inner div is the solution:

.box1 {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}
.inner {
    overflow: auto;
    height: 100%;
}
a[data-type="close"] {
    position: absolute;
    top: 0;
    right: -10px;
}

http://jsfiddle.net/36U4R/

Answer №3

Utilize the closing tag positioning:

<a data-type="close" style="position:fixed;">X</a>

Hopefully this information proves useful.

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

Modifying TextField color in a react application with Material UI

I have a react component that consists of a text field and a button. I want these elements to be displayed in green color on a black background, but I am unable to modify the default colors of all the elements. Following a similar query on how to change th ...

javascriptreactjsmaterial-uitextfield

Update the value of a td element when a select option is changed in another td element within the same table row

I have a table set up as follows: Header1 | Header2 | Header3 | Header 4 | Header 5 Row 1 |<span>Some Text</span> | <select></select> Row 2 Row 3 . . . . Rows generated dynamically. My objecti ...

javascriptjquery

Passing dynamic modifiers in custom Vue.js directives

<Button ... v-tooltip.bottom="{ value: tooltip, disabled: !tooltip }" /> Is there a way to dynamically change the position of the tooltip from "bottom" to another modifier such as top, left, or right in PrimeVue? I have various modifi ...

javascriptvue.js

The modals are all tangled up and now spilling over the edges

The modals in the project seem to have stopped working for some unknown reason. They were functioning properly a few days ago, but now they appear to be broken. The container div is overflowing. Here is a snippet of HTML code I have been using since the ...

htmlbootstrap-4

Transform your TypeScript code with a jscodeshift codemod that removes generic type declarations while preserving the wrapped

I am currently working on developing a codemod that will eliminate all instances of the $ReadOnly<T> generic from a TypeScript codebase, while retaining only T (where T represents an object or union). This is what I have managed to come up with so f ...

javascripttypescriptabstract-syntax-treejscodeshiftcodemod

Is it possible for JavaScript to style two different phone number elements on a single page?

After successfully creating a script that auto formats an element by ID on my website, I encountered an issue with multiple forms. The script works perfectly for a single element, but when I attempted to change it to target elements by class name using get ...

javascriptformattinggetelementbyidphone-numberautoformatting

Mastering Angular 4: The ultimate guide to managing multiple classes using ngClass

I want to customize my navigation links to resemble file folder tabs by dynamically adding and removing classes using Angular. When a link is active, it should not have a bottom border to indicate it as the primary tab. Here's a rough starting point: ...

javascripthtmlcssangular

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Issues with AJAX requests failing to fire with the latest version of jQuery

A small script I have checks the availability of a username in the database, displaying "taken" if it's already taken and "available" if it's not. The code below works perfectly with jQuery v1.7.2. However, I need to update it for jQuery v3.2.1. ...

javascriptjqueryajax

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

Locating a particular table without an identifier

Recently, I've started working on a selenium project and I've encountered a roadblock. The webpage I am dealing with has three tables but I only need to extract data from one specific table. The challenge lies in the fact that all tables have the ...

javahtmlseleniumxpathhtml-table

Angularjs directive: independent scope and encapsulated elements

Why aren't the contained/child elements rendering when using an isolated scope? I suspect that the parent is not rendered yet. I tried adding a $timeout, but still no luck. If I remove the isolated scope by commenting out scope: {}, it works. How c ...

javascriptangularjsangularjs-directive

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

There is an odd occurrence on my website where the font size seems to change when viewing both the www version and non-www version. While setting up a 301 redirect is a common solution, I am intrigued by why this discrepancy exists as it is not something ...

htmlcss

I encountered an issue with my shopping cart while using ReactJS

this is the App.js file import React from "react"; import ListProduct from "./listProduct"; import ListOrder from "./listOrder"; import pizza from "./pizza.jpg"; import './style.css' import { Container,Row,Col,Button } from 'react-boo ...

javascriptcssreactjsreact-bootstrap

I have to ensure that a plugin is only loaded once its dependency has been loaded with RequireJS

Currently, I am utilizing the jquery.validationEngine.js plugin and facing an issue. It seems that jqueryValidateEnglish is unable to function properly unless jqueryValidateEngine is loaded beforehand. In my code for jquery.wrapped.validationEnglish2.js, ...

javascriptjqueryjquery-pluginsrequirejs

Having difficulty getting my create-react-app to display on Heroku

I successfully managed to get my react-app running smoothly on my localhost server. However, when I attempted to deploy it on Heroku, I encountered a problem. Upon visiting the app address provided by Heroku, all I see is a blank page with none of the comp ...

javascriptexpressherokudeploymentcreate-react-app

Assistance required in publishing a website

Just finished coding my first website in HTML using Notepad. Now I'm wondering how to go about publishing it. Does DREAMWEAVER play a role in this process? Do I need it to upload the code to web hosting services or can I do it directly? And if so, how ...

htmldreamweaver

Unusual Glitch in Bootstrap 3 Dropdown Menu

I am currently developing a website using Bootstrap 3. I am encountering an issue with the navbar dropdown. When I click on the link, it changes to show "expand child menu" and "collapse child menu". To clarify, here is the image I am referring to: Initi ...

javascripthtmlcsstwitter-bootstrap-3

The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...

javascriptjqueryhtmlcss

Unable to find the desired match with Regex

I'm attempting to use a regex to replace content within brackets, but I'm encountering an unexpected result. This is the text I'm trying to target: Foo (bar) Below is the regex pattern I am using: /(?=\().*(?=\))/ My expectati ...

javascriptjqueryregexreplace