I'm having an issue figuring out how to center a <div> within a <div> that popped up after clicking a button.
Not my example, but similar. HTML:
<div class="popup">
<div class="options">
<div class="option">
<span id="1">1</span>
</div>
<div class="option">
<span id="2">2</span>
</div>
<div class="option">
<span id="3">3</span>
</div>
<div class="option">
<span id="4">4</span>
</div>
</div>
<p></p>
<div id="persona">
<span id="5">5</span>
</div>
</div>
CSS:
.popup
{
background-color: #e3ddd1;
position: absolute;
left: 10%;
top: 10%;
height: 400px;
width: 500px;
}
#persona
{
margin-left: auto;
margin-right: auto;
}
The overlay is just used to fade out the background, and then the popup appears on top of it.
The issue is in the #persona block, how do I get it so that <div id="persona"> is centered within the popup?
Try this CSS. Working Demo
.overlay
{
background-color: rgba(0, 0, 0, 0.8);
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.popup
{
background-color: #e3ddd1;
display: table;
position: absolute;
left: 50%;
top: 50%;
margin-left: -500px;
margin-top: -200px;
height: 400px;
width: 1000px;
}
#persona
{
display: table-cell;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
}
Related
I would like to add a grey lines that will separated red divs, the final result should be:
enter image description here
I have a problem with eliminate the line after last red div, my code is:
<html>
<head>
<style>
.authorsContainer{
padding-right: 15px;
padding-left: 15px;
}
.authorIconVisibility, .authorName{
float:left;
}
.booksContainer{
display: flex;
clear: both;
}
.bookContainer{
float: left;
flex: 1;
}
.bookInfo{
position: relative;
background: green;
}
.bookInfo:after{
position: absolute;
content: "";
background: #ccc;
height: 2px;
left: 25%;
right: 25%;
margin-top: 5px;
}
.bookName, .bookYear{
text-align: center;
}
.bookDescription{
position: relative;
background: red;
min-height: 100px;
margin: 10px;
}
.bookDescription:after{
position: absolute;
content: "";
background: #ccc;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
</style>
</head>
<body>
<div class="authorsContainer">
<div class="authorContainer">
<div class="authorInfo">
<div class="authorIconVisibility">icon</div>
<div class="authorName">name</div>
</div>
<div class="booksContainer">
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n1</div>
<div class="bookYear">y1</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n2</div>
<div class="bookYear">y2</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n3</div>
<div class="bookYear">y3</div>
</div>
<div class="bookDescription">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to change the last css selector to
.bookContainer .bookDescription:not(:last-child):after{
position: absolute;
content: "";
background: #111;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
but it does not work (there is no lines at all).
What should I change?
I am using #media print to generate a report. When I print it in chrome, it is fine, while in Firefox, the components are messed up in the positions. My code is provided as below in two different sections: the first one is the CSS styling and the next one the HTML code.
How can I write this code to work in Chrome and Firefox?
#media print {
.print-only {
display: block;
}
a[href]:after {
content: none !important;
}
object {
width: 160mm;
height: 120mm;
}
button, alert-danger, .no-print {
display: none !important;
}
.top-left-corner-print {
position: absolute;
top: 160px;
left: 50px;
font-size: 14px;
width: 200px;
}
.top-left-print {
position: absolute;
top: 160px;
left: 250px;
font-size: 14px;
width: 200px;
}
.top-print {
position: absolute;
top: 156px;
left: 450px;
font-size: 14px;
width: 200px;
}
.top-right-print {
position: absolute;
top: 160px;
left: 650px;
font-size: 14px;
width: 200px;
}
.top-left-print-second-row {
position: absolute;
top: 565px;
left: 60px;
width: 200px;
font-size: 20px;
}
.top-left-print-third-row {
position: absolute;
top: 950px;
left: 60px;
width: 200px;
font-size: 20px;
}
.print-audiogram-graph {
border: none !important;
position: absolute;
top: -170px;
left: 10px;
width: 95%;
height: 95%;
}
.print-abTest-graph {
border: none !important;
position: absolute;
top: 540px;
left: 50px;
width: 40%;
height: 40%;
}
.tympanometry-print {
border: none !important;
position: absolute;
top: 610px;
left: 420px;
}
.ipsi-reflex-print {
border: none !important;
position: absolute;
top: 780px;
left: 420px;
}
.contra-reflex-print {
border: none !important;
position: absolute;
top: 920px;
left: 420px;
}
.comment-print {
position: absolute;
top: 1010px;
left: 40px;
width: 360px;
word-break: break-all;
}
.no-border-print {
border: none;
}
aside#sidebar, header[role="banner"], footer, #comments, #respond {
display: none;
}
.page-header {
vertical-align: middle;
text-align: center;
border-bottom: none;
}
}
<div class="h2 page-header">Audiology Session</div>
<div class="alert alert-info top-buffer no-border-print" data-bind="with: metadata">
<div class="row">
<h4 class="col-md-6 top-left-corner-print" id="">
Client: <a data-bind="text: subjectName"></a>
</h4>
<h4 class="col-md-4 top-left-print">
Date: <span data-bind="text: date"></span>
</h4>
</div>
<div class="top-buffer"></div>
<div class="row">
<h4 class="col-md-6 top-right-print">
Clinician: <a data-bind="text: clinicianName"></a>
</h4>
<h4 class="col-md-4 no-print">
Clinic:
<span data-bind="css: { performedByBsh: performedByBsh }">
<span data-bind="text: clinic, css: { bshClinicUnset: bshClinicUnset }"></span>
</span>
</h4>
</div>
</div>
<div style="text-align:left; width:750px; max-width:100%">
<h3 class="no-print" style="margin-top:50px">Audiograms</h3>
<p class="top-print">Transducer: <span data-bind="text: transducer"></span></p>
<object class="print-audiogram-graph" id="audiogram-graph" type="image/svg+xml" data="~/Content/audiogram.svg" style="border:1px solid gray">
Your browser does not support svg objects.
</object>
</div>
<div style="text-align:left; width:450px; max-width:100%">
<h3 class="top-left-print-second-row" style="margin-top:50px">A/B Tests</h3>
<object class="print-abTest-graph" id="ab-test-graph" type="image/svg+xml" data="~/Content/abTest.svg" style="border:1px solid gray">
Your browser does not support svg objects.
</object>
</div>
<div>
<h3 class="no-print" style="margin-top:50px">Tympanometry</h3>
<div data-bind="with: $data.tympanometry()">
<div class="AudiologySession no-print" data-bind="visible: canShowTympanometryFields">
#Html.Partial("~/Views/Person/_TympanometryPartial.cshtml")
</div>
<div class="print-only">
#Html.Partial("~/Views/Person/_TympanometryPrintOnly.cshtml")
</div>
</div>
</div>
<div>
<h3 class="no-print" style="margin-top:50px">Reflexes</h3>
<div data-bind="with:reflexes">
<div class="AudiologySession no-print" data-bind="visible: canShowReflexFields">
#Html.Partial("~/Views/Person/_ReflexPartial.cshtml")
</div>
<div class="print-only">
#Html.Partial("~/Views/Person/_ReflexPrintOnly.cshtml")
</div>
</div>
</div>
<h3 class="top-left-print-third-row" style="margin-top:50px">Comments</h3>
<div class="comment-print" data-bind="with:metadata">
<div data-bind="visible: !editor.editing()">
<span data-bind="text: comment"></span>
</div>
<div data-bind="visible: editor.editing()">
<textarea maxlength="200" placeholder="Your comment…" type="text" data-bind="value: comment"></textarea>
</div>
</div>
Can anyone tell me what I am missing?
I could not find the best solution but using mm instead of px helped a lot to get a more close behavior in Firefox and Chrome and also using flex as follows in my css:
#media print {
.print-only {
display: block;
}
.wrapper-print {
display: grid;
grid-template-columns: 40% 10% 30% 20%;
grid-template-rows: 6mm 6mm 103mm auto auto;
}
.print-content-box {
grid-row: 4;
grid-column: 1/5;
display: flex;
flex-flow: column wrap;
max-height: 140mm;
}
.
.
.
and in the html:
<div class="print-content-box">
<div class="1">
.
.
.
</div>
<div class="2">
.
.
.
</div>
.
.
.
</div>
I want to display full close button/text while maintaining modal's position:fixed and overflow:scroll
if i replace overflow:scroll with overflow:visible it appears fully but stops scrolling
<div id="root_component">
<div class="modal" >
<a class="modal-close btn-floating btn-small
waves-effect waves-light right clearfix">
<i class="material-icons">cancel</i>
</a>
<div class="modal-content"></div>
</div>
</div>
.modal {
width: 80% !important;
overflow-y: scroll;
z-index: 1003;
display: block;
opacity: 1;
transform: scaleX(1) scaleY(1);
position: fixed;
padding: 0;
margin: auto;
border-radius: 2px;
}
#root_component .clearfix {
position: absolute;
right: -16px;
top: -16px;
z-index: 100;
}
screenshot attached
Just wrap your .parent div in another .parent-wrapper div and take your .child div out of .parent. This works :
.grand-parent {
position: relative;
height: 10px;
width: 10px;
background: red;
top: 10px;
}
.parent-wrapper {
height: 150px;
width: 60px;
position: fixed;
}
.parent {
height: 150px;
width: 60px;
overflow: scroll;
background: blue;
}
.child {
overflow: visible;
position: absolute;
top: 10px;
left: 20px;
background: yellow;
}
<div class="grand-parent">
<div></div>
<div class="parent-wrapper">
<div class="parent">adfasdf<br> asdf
<br> asdf
<br> adsf
<br> asdfasd
<br> fads
<br> fdsaf
<br> sadfasd
<br> afdsf
</div>
<div class="child"> close</div>
</div>
</div>
If this is what you're trying to do, you have to make the .child class position fixed. The close button/text position will be fixed irrespective of scroll on the divs.
.grand-parent {
position: relative;
height: 10px;
width: 10px;
background: red;
top: 10px;
}
.parent {
height: 150px;
width: 60px;
overflow: scroll;
background: blue;
position: fixed;
}
.child {
overflow: visible;
position: fixed;
top: 20px;
left: 30px;
background: yellow;
}
<div class="grand-parent">
<div></div>
<div class="parent">adfasdf<br> asdf
<br> asdf
<br> adsf
<br> asdfasd
<br> fads
<br> fdsaf
<br> sadfasd
<br> afdsf
<div class="child"> close</div>
</div>
</div>
I have following HTML:
<div className={`page-header-profile-photo-container`}>
<div className="user-picture">
</div>
<div className="user-name">
<p>Sample GmbhH</p>
</div>
</div>
And my css:
.page-header-profile-photo-container{
position: absolute;
top: 10%;
right: 130px;
width: 200px;
}
.user-picture {
position: relative;
top: 10%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
}
.user-name{
position: absolute;
top: 5%;
}
This renders like following:
I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.
How can I fix this?
First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class
.page-header-profile-photo-container{
width: 200px;
position: absolute;
top: 10%;
right: 130px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
display: inline-block;
vertical-align: middle;
}
.user-name{
display: inline-block;
vertical-align: middle;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)
Using flex-box it will work good for me. Hope this help.
.page-header-profile-photo-container{
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
height: 50px;
top: 10%;
right: 130px;
padding: 5px 10px;
width: 200px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
/*background-color: #787567;*/
}
.user-picture img{
border-radius: 50%;
display: block;
height: auto;
max-width: 100%;
}
.user-name{
font-size: 15px;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
<img src="http://placehold.it/40x40" alt="Profile Picture" />
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt