Generating resizable DIV Containers with Fixed Titles

I am currently designing a dashboard consisting of divs with different sizes, where the height and width are set as percentages. The content within each div is dynamic, and I am looking to add attractive headers to describe the contents of each box.

Currently, the headers are placed inside the boxes, causing complications with overflow and making it tricky to space out the inner content effectively.

Is there a more efficient way to ensure perfectly-sized headers within the divs, or should I consider placing them on top of the boxes like little hats?

Although close to what I envision, the issue of the header scrolling along with the content is not desirable at all.

Create div with title header

I aim for a widget-like design that self-describes its own content.

Referencing a Fiddle that comes quite close to my desired result:

http://jsfiddle.net/exrXR/1019/

However, the use of Position Absolute overrides many important aspects...

htmlcss

Answer №1

I created this demo before the question was updated to include a link to another demo. After reviewing the linked demo, it appears that the markup is quite similar:

<div class="dashWrap">
    <h2>header</h2>
    <div class="dashContent">
        <p><!-- content --></p>
    </div>
</div>​

The CSS below should meet your requirements:

.dashWrap {
    width: 50%;
    margin: 0 auto 1em auto;
}
.dashWrap h2 {
    background-color: #ffa;
    border: 2px solid #000;
    border-radius: 0.5em 0.5em 0 0;
    text-indent: 0.5em;
}

.dashWrap .dashContent {
    max-height: 5em;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #000;
    border-top-color: transparent;
}​

Check out the JS Fiddle demo.

Updated in response to the OP's question (in comments):

...I have no clue why it works. If you would be so kind as to give me a brief explanation as to why the header stays in place so miraculously that would be extremely helpful.

The reason the h2 stays stationary is simply because I didn't move it or alter its default behavior of display:block. This means it remains in its original position in the document flow.

As for the .dashContent element, it can scroll due to two rules: first, the max-height prevents it from expanding vertically to fit its content, and second, the overflow-y property allows its contents to be scrolled (some browsers also require setting overflow-x, hence the inclusion above).

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

Navigating to the designated row within the HTML table even with a scrollbar present

I am working with a table where the selected row is highlighted when a user clicks on it. In another panel, there is a map displaying all employees. Each row in the table has a unique ID and clicking on an employee's image on the map highlights their ...

javascriptjqueryangularjshtml

Changing the color of a Datatable row through a SQL query in an ASP.NET C# application

I am looking to add color to specific rows in my asp.net c# table. I have a table displayed using an ASP:Repeater with HTML: <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered tabl ...

c#htmlasp.net

What is the process of utilizing a <li> for a hover selector in jquery?

I've encountered an issue with a list that I am trying to modify its content when hovering over them. Despite using the id as a selector for triggering the hover function, all list items change color instead of just the intended one. The challenge lie ...

jqueryhtmlcss

Struggling with jQuery not updating class attributes for list items, any solutions to resolve this issue?

In order to have a unified navigator for various classes, I have stored it in a separate HTML file and am attempting to import it into the home page using jQuery. <!-- ======= Header ======= --><!-- End Header --> <div id="header-par ...

htmljquerybootstrap-4

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

javascripthtml

Enhance Your Webpage with jQuery Drag and Drop Feature Across Multiple Lists

I've been successfully using "jQuery UI Sortable connectwith" for drag & drop functionality, as shown in the example here: . However, I now need to implement drag & drop with multiple UI elements and it's not functioning correctly. Example: < ...

javascriptjqueryhtmljquery-ui

How can I implement draggable and resizable <div> elements to create resizable columns in an antd table using React?

I am currently utilizing the Reacts Antd library to showcase the contents of my table. I am interested in implementing a feature that allows me to resize the column widths. To achieve this, I have wrapped the column in my element as depicted below. The dr ...

javascripthtmlcssreactjsantd

Can you provide instructions on creating a button within an ASP UpdatePanel that does not trigger a server postback?

The button functions by opening a dialog page where users can verify a license agreement and select a file through the pathname. However, this selected file value is not utilized in posting or partially posting the form at this stage. Despite numerous at ...

javascriptasp.nethtml

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

javascripthtmlcsscanvas

Tips for properly utilizing "require" in application.css with the Skeleton framework

I am currently working on implementing the skeleton-rails CSS framework into my application. Within the app/views/layouts/application.html.erb file, I have created containers and a list nav that require styling. Following the guidelines provided by the ske ...

cssruby-on-railsframeworksskeleton-css-boilerplate

The website functions perfectly in Firefox, but encounters issues in Chrome

Having an issue with my website where a table is not displaying correctly next to an image in Chrome, even though it works fine in Firefox. Here is the CSS: #right{ float:right; position: absolute; } #left{ float:left; position: absolute; } This is how t ...

htmlcssgoogle-chromefirefox

Oops! We encountered an issue: Control not found for path: 'stocks -> stockName'

Hello, I am encountering an issue while attempting to create a dynamic form using the reactive form module. Here is the HTML code I have written: <div class="container-fluid"> <h2>Stock Rebalancer</h2> <div class="form-group"> ...

htmlangulartypescriptangular-reactive-forms

What is the best way to emphasize a certain row within XSLT?

I am seeking a solution to emphasize rows containing the "year" element with a value exceeding "2000" in XML and XSLT. Here is the code snippet: XML <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="harrypotterbooks. ...

htmlcssxmlxslt

Retrieving inline CSS value using jQuery

How do I retrieve the inline-css value of the second child within div #one using jQuery. <li id="one"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, velit!</h2> <div style="width: 1425px; height: 1080px ...

jqueryhtmlcss

Designing a login window that appears as a popup and blurs out the background page for enhanced security

I am in the process of developing a login/register page and I would like to implement a feature where, upon clicking the 'register now' button on the home page, a popup appears within the same website with a transparent and dull background. An ex ...

htmlcss

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Displaying border upon tapping the icon in a mobile browser

I am facing an issue with an icon that has interactive functionality. When I click on it, a visibility class toggles. However, when I try to interact with it on my phone, a blue marker appears on top of the icon during the process which does not look very ...

androidhtmlcss

Dividing the Row in Bootstrap4 into two columns

I'm trying to figure out how to split a row into two sections to accommodate two headings in a single row, similar to the following: https://i.sstatic.net/GD99P.png Unfortunately, my current code isn't allowing me to separate the row as shown ab ...

htmltwitter-bootstrapbootstrap-4

The essence of my design disappears when I generate a canvas object using Fabric.js

After defining top and left attributes for a Canvas Object using a JavaScript function, I encounter an issue when creating a fabric Canvas object. var fabricCanvas = new fabric.Canvas('mycanvas'); Upon creation, my HTML Canvas has its top and ...

javascripthtmlcanvasfabricjs