Creating dynamic content within an expandable div element

In my web app development, I have crafted a unique 'virtual desktop' where I can open draggable and resizable 'windows'. These windows are represented by absolutely positioned div elements. I am looking to create responsive content within these windows, scaling from 4 columns at 25% width each down to 1 column at 100% width.

Instead of using frameworks, I am seeking a custom solution for this particular scenario.

I have experimented with @media queries, but they do not work as intended since I am adjusting the dimensions of the virtual window's content area, not the browser window itself.

Is there a CSS3 technique that I might be overlooking? Essentially, I need to dynamically change the width (as a percentage) of a class based on its parent element's dimensions, which are unrelated to the browser window. My goal is to target the immediate parent of the class rather than the overall viewport.

Could this be achievable?

htmlcssresponsive-design

Answer №1

Absolutely, it can be done... But there's a catch:

Trying to achieve this with a DIV is a no-go.

After fueling up on coffee, I had an epiphany that @media takes its cues from document.window, which led me to the workaround of embedding the 'responsive' elements in an iframe. This grants @media its own confined document boundaries within the main content or desktop page. By having my pseudo window content isolate itself in a separate document with distinct bounding dimensions, @media operates flawlessly and allows for responsive layouts within resizable divs...

Simple once you give it some thought.

SIDENOTE:

I experimented with flexbox as well, and while it somewhat met my needs (such as expanding content to fill space), it stumbled when attempting to shrink content below its min-width parameter. The wrapping function was lackluster, to say the least. Despite the plethora of settings available, there might be potential to optimize it for specific scenarios. It could certainly offer a cleaner solution.

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 ensuring a flexbox stays within the bounds of its container and doesn't exceed the available space

I am in the process of developing a modal that needs to be centered on my page and expand organically, but only up to a specific width and height limit. Using flexbox, I have successfully centered this modal (.modal) on the page. Within the modal, there ...

htmlcssflexbox

Is it recommended to add the identical library to multiple iFrames?

Here's a quick question I have. So, my JSP page has 4 different iFrames and I've included JQuery UI libraries in it: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://c ...

javascriptjqueryhtmljspiframe

Tips for transferring information between two HTML pages

Looking for some advice here. I'm in the process of creating a website for my record store using HTML5. On one page (store.html), I plan to showcase all the albums with a Buy Now button below each album that links to buy.html <div class="item got ...

html

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

javascriptphpjqueryhtml

"Layering text over images using background colors for a unique design touch

Is there a way to create a solid-color overlay that perfectly matches the size of an image using just HTML and CSS? I want to display text on this overlay, but it needs to work with images of any size. The image will be centered and resized to fit within ...

htmlcssimageoverlayfigure

Is it possible to determine the status of the cover by inspecting the element?

Recently, I've been contemplating the idea of adjusting my background image to move around a bit. It seems like a fancy concept and not too difficult to execute. However, I am facing an issue because my background image is currently set to cover (back ...

javascriptcss

Discover the secret to customizing numerous bootstrap cards with CSS - identify the mistake

I have some Bootstrap cards that I want to customize with CSS by overriding the default styles. Card code <div class="card" style="width: 18rem;"> <img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/ ...

cssbootstrap-4stylesbootstrap-cards

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

pythonhtmlmysqldjango

Ensuring Contact Form Accuracy with Jquery Validation

I am trying to implement form validation using jQuery. Here is the code I am using: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2 /jquery.min.js"></script> <script type="text/javascript" src=" http:// ...

jqueryhtmljquery-validatevalidation

The object holds a value

How can I successfully put an object into a value attribute, for example: <option value={valueSort}>// valueSort = {name: 'ASC'}, to sort by name in my project? Currently, the result shows as [object Object] and I'm unsure of what that ...

javascripthtmlreactjstypescriptselection-sort

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

pythonhtmlcssweasyprint

What happens when a CSS module is exported as an empty object?

My go-to for creating projects is using TypeScript and create-react-app. I recently incorporated the typings-for-css-modules-loader and dabbled in css-modules as well. { test: /\.css$/, use: [ require.resolve('style-loader'), { ...

javascriptcssreactjstypescript

Not all Angular Material2 styles are being fully applied

One issue I am encountering is that styles for components such as <mat-chip> or <button mat-raised-button> (the only ones I have found) are not working properly and appear gray by default. However, styles do apply correctly to the <mat-card& ...

cssangularangular-material2

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

Having some trouble getting @font-face to display correctly in IE, and I haven't found a solution yet. I've looked into this resource: but unfortunately it didn't work on my Windows 7 IE. Does anyone have a better suggestion? ...

cssfont-face

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

javascriptcss

Tips for preserving HTML markup in a Google Sheets cell without disrupting the tags

I am currently experimenting with using Google Sheets to input the complete HTML of an email into a cell, where I have variables for text, image src, href src, and more. As of now, I am utilizing Google Script to substitute tags with the corresponding val ...

htmlgoogle-apps-scriptgoogle-sheetsgoogle-appsgoogle-sheets-formula

Customize the colors of the arrows in Bootstrap's carousel

There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...

htmlcsstwitter-bootstrapbootstrap-4carousel

What is the best way to transfer data from the view to the templates?

I am currently working on retrieving data from my views.py file to my HTML page. Below is the code snippet from my views.py: def VerifiedBySuperuser(request): if request.method == 'POST': vbs = MaanyaIT_EXAM48_ManageQuestionBank() ...

htmldjangodjango-2.0

Is there a way to position two images using CSS, with one in the upper right corner and the other in the lower right corner?

I'm trying to use CSS to align two images, one in the upper right position and the other in the lower right position. Can you help me with this? Below is the HTML markup: <th class="X" scope="col"> Time <input id="ORAAsc" class="up" type="i ...

htmlcss