I've created a popup that appears in the center of the screen using:
transform: translate(-50%, -50%);position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the content.
You can view my code on jsfiddle here: https://jsfiddle.net/qh13mnaf/1/
I'm wondering why the width of the popup isn't expanding as expected.
Resolution:
To center the div, start by setting .popup-content { width: 100%; } and then nest your content within another div with display: table; margin: 0 auto;
Rationale:
The attribute left: 50% applied to your centered div .popup-content leaves the left half of its parent empty, essentially utilizing only 50% of the available width.
Adjusting the width percentage will determine how much of the remaining space is occupied; for example, left: 30% will take up 70% of the parent's width.
The CSS property
transform: translate(-50%, -50%);Suggested CSS Approach:
If you aim for a dynamically sized, vertically and horizontally centered div, follow these steps:
Maintain vertical centering as-is, but expand the width to 100%:
.popup-content {
position: absolute;
top: 50%;
width: 100%;
transform: translate(0%, -50%);
}
Next, align the content horizontally by nesting it inside a div styled with display: table;
.popup-center-horizontal {
display: table;
margin: 0 auto;
background: red;
}
For a confined layout, set a max-width limit like so:
.popup-center-horizontal {
max-width: 90%;
}
Compatible with IE8 and later versions.
Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...
I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...
I attempted to use a sample from bootstrap, but I am not having any luck with it. Is there anyone who can assist me in resolving this issue and understanding it better? Code Snippet: <input type="text" class="form-control" id="tokenfield" value="red, ...
I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar. Below is the HTML code that creates the hidden popup list initially and shows it on ...
There's a peculiar bug I'm encountering which results in extra spacing on the body or html element. This additional space isn't visible within the normal browsing area of most browsers, only becoming apparent when scrolling to the right side ...
I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...
Utilizing the kendo-grid in my project serves multiple purposes. Within one of the cells, I aim to incorporate an input TextBox like so: <kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column> It is ...
<script> function a(id) { var table = document.getElementById(id); .... } </script> @{ //Is there a way to rewrite the line "var table = document.getElementById(id)" here within the ser ...
As I dive into the world of web development, I find myself intrigued by the idea of reusing navigation and banners across multiple web pages. However, despite my research efforts, I have yet to come across a definitive answer. My objective is simple: The ...
I utilized Mpdf to generate a three-page PDF document. The first and third pages consistently contain data, but the presence of data on the second page varies. I prefer not to display the second page if it is empty. Here's the code structure: html = ...
Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...
Within my code, I am searching for the DIV element that has the class .se and also has the attribute display: block. Once found, I need to retrieve the ID of this particular DIV. Unfortunately, it seems like my current approach is not correct. var usedse ...
I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...
I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...
I am working on a functionality where the navigation bar items will toggle hidden or shown only when the browser width is less than 768px and an element with the class "navlogo" is clicked. I have included my code below for reference. if ($(window).width( ...
While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...
I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...
After following a CSS menu tutorial and customizing it, two issues have arisen. When hovering over the "About" menu with additional list links, the transition works but then the content shifts to the left and fades out. The second issue is related to tryin ...
In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div> Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...
I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...