I have implemented the following CSS code to center my content both vertically and horizontally. However, I am facing an issue where if the browser is minimized to a size smaller than the content div, the centering effect still works but scrolling becomes disabled. This results in the top of the content being cut off.
#splash-centre-container{
position: absolute;
top: 50%;
left: 50%;
height: 550px;
width: 760px;
min-height: 550px;
padding: 20px;
margin: -310px 0 0 -400px;
}
When you set the position of an element as absolute, it is taken out of the normal page flow and does not contribute to the space occupied by other elements.
To ensure that a splash screen stays within view even on smaller screens, it's important to set min-width and min-height for the body or its container. This prevents the containing element from shrinking below the size of the splash screen and going off-screen.
Check out this example on jsFiddle
HTML
<div class="spacer">
<div id="splash-centre-container">abc</div>
</div>
CSS
html, body {
min-width:760px;
height:100%;
min-height:550px;
position:relative;
}
#splash-centre-container {
position: absolute;
top: 50%;
left: 50%;
height: 550px;
width: 760px;
margin: -275px 0 0 -380px;
background-color:red;
}
Follow these steps to achieve this:
#splash-centre-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
position: absolute;
overflow: auto;
border: solid black 2px;
}
Back in 2009, Chris Coyier shared a fantastic solution that I stumbled upon here. What sets this solution apart is its ability to center content both vertically and horizontally, while also accommodating dynamic height. Unlike other answers that rely on fixed heights, which can be limiting, this one allows for scrolling on smaller screens, making it perfect for creating centered inline forms as an alternative to modal pop-ups.
I took the liberty of refining and converting the code into a Sass mixin for your convenience. Now, you can easily adjust the form width by incorporating form element CSS and related variables into the Sass mixin. This ensures that your form element widths remain within the constraints of the centered inline form.
If you want to see it in action, check out the jsFiddle demo.
Sass (SCSS) Code
html,
body,
form {
height: 100%;
margin: 0;
padding: 0;
}
@mixin CenteredInlineForm( $ContainerSetName, $formWidth) {
div.#{$ContainerSetName}_CenteredForm {
display: table;
overflow: hidden;
margin: 0 auto;
height: 100%;
width: #{($formWidth + 15)}px;
div.#{$ContainerSetName}_CenteredFormContentContainer {
display: table-cell;
vertical-align: middle;
div.#{$ContainerSetName}_CenteredFormContent {
background-color: lightgrey;
border: 3px solid darkgrey;
border-radius: 15px;
padding: 15px;
}
}
}
*:first-child + html div.#{$ContainerSetName}_CenteredForm {
position: relative;
}
/*ie6 Support: */
/* * html div.#{$ContainerSetName}_CenteredForm{position:relative;} */
*:first-child + html div.#{$ContainerSetName}_CenteredFormContentContainer {
position: absolute;
top: 50%;
}
/*ie6 Only: */
/* * html div.#{$ContainerSetName}_CenteredFormContentContainer{position:absolute;top:50%;} */
*:first-child + html div.#{$ContainerSetName}_CenteredFormContent {
position: relative;
top: -50%;
}
}
@include CenteredInlineForm(UserInfoInput, 400);
HTML Markup
<div class="UserInfoInput_CenteredForm">
<div class="UserInfoInput_CenteredFormContentContainer">
<div class="UserInfoInput_CenteredFormContent">
<p>
Content or form labels/inputs
</p>
...
</div>
</div>
</div>
I am struggling with aligning Sheet3 and Science vertically left in a list with checkboxes. Currently, Science goes below the checkbox and I need a solution to fix this alignment issue. https://i.sstatic.net/bxoBT.png Any guidance on how to adjust the al ...
I have a unique HTML structure that looks like this: <div> <div class="my-grid-container" ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div class="myClass"> My customized div </div> ...
My input field has a long value and is set to readonly. Although I have applied overflow-x: hidden; to it, scrolling is still possible on mobile devices. I want to disable this scroll behavior. Can anyone provide a solution? Thank you for your assistance. ...
I have a project where I am building a video store with movie images, titles, lengths, and delete options. However, every time I try to upload an image, it returns null. I am using Laravel 5.8.35. I attempted to use getClientOriginalExtension, but it does ...
Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table: import React from 'react' import { useTable, useGlobalFilter, usePagination } from 'react-table& ...
Below is the code for my accordion list, created using only CSS and HTML. Whenever a heading is clicked, the text slides in with a different background color. How can I make it so that the container with the text and different background color fades in and ...
I have been working on customizing the vAxis ticks in my Google chart to display multiple colors. Here is the code I currently have: var gridlines = [ '#ff0000', '#00ff00', '#0000ff' ]; var container = document.get ...
I've recently started learning CSS and while I've come across similar topics, none have provided the solution to my specific problem. After spending 2 hours experimenting with various CSS properties like hidden, transition, and display, I am now ...
I'm using JavaScript to create DOM elements dynamically. In order to animate a slide down effect, I need to retrieve the height of a specific div element. However, both clientHeight and offsetHeight are returning 0. I have confirmed that the div eleme ...
As a beginner in front end development, I am finding it a bit challenging at the moment. Here's what I have so far: 1 main HTML file (index.html) 1 JavaScript file (something.js) 2nd HTML file (something.html) Main HTML: <!DOCTYPE html> < ...
I'm having issues with my Bootstrap collapsible menu. Can someone help me identify the problem? <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class= ...
The functions below are working as expected, but when I try to include the custom functions next() and prev(), something is off with the script. Where could the issue be stemming from? function next() { $('#up').click(function() { ...
As a beginner in HTML and CSS, I'm curious about creating an eye-catching header on a website with a different background than the rest of the page. Is it possible to achieve this effect using HTML and CSS? Apologies if this question sounds silly. T ...
Is there a way to maintain the colors while printing my HTML page to PDF? <table class="table table-responsive table-striped"> <thead> <tr> <th>Elev</th> <th>Session n ...
My dilemma lies within the sidebar of my website that I have been diligently crafting. Its primary objective is to gracefully extend to the bottom of the page, regardless of any resizing antics. For a blissful week, it conformed beautifully to this behavio ...
Can someone help me figure out why the CSS isn't working when I try to use a div tag to style a page that I include with include 'login.php'; inside the <div> tag? My main goal is to overlay the form on the page, but for now I just wan ...
I'm currently working on a web application and facing an issue with a rollover effect that is not functioning correctly. When the mouse hovers over an element, it should be displayed on top, but instead, it appears underneath. I have provided a jsfidd ...
I am using ngFor to iterate through a list of images like this: <div class="image-holder" *ngFor="let image of datasource"> <img src="{{image.url}}" height="150" /> </div> Below is the corresponding CSS code: .image-holder { di ...
I am looking to revamp a WordPress blog with 5 different pages, each requiring a unique background image. Is there a method to achieve this without altering the background element, but instead changing the background image of the #main element in my CSS? ...
Trying my hand at practicing HTML by creating a small webpage, but struggling with why the Footer is aligning itself under the Header instead of the container I set up. It seems like a small detail that I might have missed, but I've hit a wall and ca ...