How can I align a div in a wrapper on the right side when the div width is auto?
Example:
$("span").click(function() {
$(".calendarNotificationWrapper").append("<div class='calendarNotification'>New added notification</div>");
});
.calendarNotificationWrapper {
position: fixed;
right: 40px;
bottom: 40px;
display: block;
width: auto;
z-index: 1000000;
text-align: right;
}
.calendarNotification {
width: auto;
line-height: 20px;
z-index: 10000000;
padding: 20px;
font-weight: bold;
color: #FFF;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
display: table;
margin-top: 10px;
position: relative;
}
<span>Add a notification</span>
<div class="calendarNotificationWrapper">
<div class="calendarNotification">
This div should be aligned right
</div>
<div class="calendarNotification">
That is a notification message with a very very long text
</div>
<div class="calendarNotification">
This div should also be aligned right
</div>
</div>
Add
margin-left:auto;
to .calendarNotification
Related
I'm working on a website splash page which should show rows of same height. Each row has a title and further text items and one image.
The text and image items should align at the bottom of each row as shown on following screenshot
On Hover, the image should slide up to max height which fits into the row.
My question is:
Can I access the current value of 1fr from parent row grid-auto-rows: 1fr;to give the image on hover a max height?
This is how my code currently looks like:
html, body {margin:0; padding:0}
.jumbo {
width: 100%;
height: 100vh;
background: yellow;
display: grid;
grid-auto-rows: 1fr;
}
.jumbo__item {
position: relative;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
font-size: 20vh;
padding: 0 0 0 10px;
#overflow: hidden;
}
.jumbo__rowtags{
position: absolute;
bottom: 0;
right: 0;
}
.jumbo__tag {
margin-right: 10px;
display: inline-block;
background: white;
vertical-align: bottom;
height: 30px;
padding: 0 10px;
font-size: 20px;
line-height: 30px;
}
.jumbo__tag-high{
height: 30px;
overflow: hidden;
background: none;
cursor: pointer;
}
.jumbo__tag-high:hover{
height: auto;
max-height: 200px;
}
.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}
<div class="jumbo">
<div class="jumbo__item a">
Dogs
</div>
<div class="jumbo__item b">
and
<section class="jumbo__rowtags">
<span class="jumbo__tag jumbo__tag-high"><img src="https://placeimg.com/350/200/nature"></span>
<span class="jumbo__tag">Hello</span>
<span class="jumbo__tag">World</span>
</section>
</div>
<div class="jumbo__item c">
cats
</div>
</div>
You can make the image and its container to be height:100% of the row then consider a transform animation
html, body {margin:0; padding:0}
.jumbo {
width: 100%;
height: 100vh;
background: yellow;
display: grid;
grid-auto-rows: 1fr;
}
.jumbo__item {
position: relative;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
font-size: 20vh;
padding: 0 0 0 10px;
#overflow: hidden;
}
.jumbo__rowtags{
position: absolute;
bottom: 0;
right: 0;
top:0; /* added */
}
.jumbo__tag {
margin-right: 10px;
display: inline-block;
background: white;
vertical-align: bottom;
height: 30px;
padding: 0 10px;
font-size: 20px;
line-height: 30px;
}
.jumbo__tag-high{
height: 100%; /* added */
overflow: hidden;
background: none;
cursor: pointer;
}
.jumbo__tag-high img {
height:100%; /* added */
transform:translateY(calc(100% - 30px));
transition:1s all;
}
.jumbo__tag-high:hover img{
transform:translateY(0%);
}
.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}
<div class="jumbo">
<div class="jumbo__item a">
Dogs
</div>
<div class="jumbo__item b">
and
<section class="jumbo__rowtags">
<span class="jumbo__tag jumbo__tag-high"><img src="https://placeimg.com/350/200/nature"></span>
<span class="jumbo__tag">Hello</span>
<span class="jumbo__tag">World</span>
</section>
</div>
<div class="jumbo__item c">
cats
</div>
</div>
I'm trying to center two input fields side by side together with horizontally centering. I have two problems, the first one is that the two input fields for whatever reason overlap each other a little.
The closest I have been to solving this problem is to use "box-sizing: border-box" but that, unfortunately, removes the padding and thus change the design. The second problem is that I need both of the input fields to be in the center.
.quote-page .contact .box {
width: 70%;
}
.quote-page .contact .box .left {
float: left;
width: 50%;
}
.quote-page .contact .box .right {
float: left;
width: 50%;
}
.quote-page .form-2 {
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
width: 100%;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
Here is the complete script so you can see the problem:
https://codepen.io/anon/pen/BdQqeN
You had the right idea but unfortunately you are going to have make additional adjustments to what you're creating whether you use the box-sizing: border-box; or not.
The reason it's acting funny is because without border-box you are going over the total of 100% width.
In order to create what you want, I've adjusted the following:
Changed the width of the .box
Added an overflow: hidden; to .box to prevent it from collapsing with the floated children
Added margin: 0 auto; to center the children to .box
Changed the width of .box .left to width: 49%; and a margin-right: 1%; (assuming you wanted space between the inputs)
Same as the above item but for .box .right
Added box-sizing: border-box to .form-2, and increased the height to 40px and padding to 12px
Here's an updated pen using border-box on just your middle inputs:
https://codepen.io/anon/pen/YxpRVK
CSS
.quote-page .contact .box {
width: 73.5%;
overflow: hidden;
margin: 0 auto;
}
.quote-page .contact .box .left {
float: left;
width: 49%;
margin-right: 1%;
}
.quote-page .contact .box .right {
float: left;
width: 49%;
margin-left: 1%;
}
.quote-page .form-2 {
box-sizing: border-box;
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
/*border: 1px solid #ccc;*/
border: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
line-height: 1.42857143;
height: 40px;
width: 100%;
margin: 10px 0 10px 0;
padding: 12px;
}
HTML (No Changes)
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
<div class="right">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
</div>
Hardly visible, but they're in the middle and next to each other.
I added the div with class .quote-page. You were referring to it in your CSS but in the HTML it was missing. Here it is the top element set to a width of 100%.
The div.box element is centered via margin: 0 auto.
.quote-page {
width: 100%;
}
.quote-page .box {
margin: 0 auto;
width: 70%;
display: flex;
}
.quote-page .contact .box .left {
width: 50%;
}
.quote-page .contact .box .right {
width: 50%;
}
.quote-page .form-2 {
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="quote-page">
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
</div>
Simplest way...
Add css
.box {text-align: center;}
.left, .right {display:inline-block;}
I am using the flexbox to center align the items inside (as nothing else seems to work). Although the bootstrap responsive-embed seems to completely disappear and i have no idea why. I can't not use position: relative on the embed as this stop it being responsive. Here is the code for it...
.embed-responsive {
/*position: initial;*/ /* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
JSFiddle
Taking a look to Grid system you may insert your "col-md-6" inside two rows like in the following snipppet:
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: gray;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="title-area">
<div class="row">
<div class="col-xs-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-xs-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>
Add a div around the embed-responsive div so that the former can flow in the flex div and the latter can have position relative needed by the embed-responsive-item. Give the new div a flex-grow style of 1 so it sizes.
HTML:
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div style="flex-grow: 1;">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>
Styles:
.embed-responsive {
// position: initial;
/* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small {
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
https://jsfiddle.net/rz5cmpz3/2/
I just want the 2nd div to display a bottom border. I either get both divs displaying a bottom border or none at all.
.container {
width: 75%; overflow: hidden;
border: 0;
}
.container div:nth-child(1) {
width: auto; float: left; height: 25px;
padding: 5px 20px;
background-color: white;
}
.container div:nth-child(2) {
margin-left: auto; height: 25px;
padding: 5px 20px;
background-color: ghostwhite;
border-bottom: 1pt solid black;
}
<div class="container">
<div>Div Left</div><div>Div Right</div>
</div>
Use display:inline-block, instead of float as float allows the second div to occupy space behind the first.
.container {
width: 75%;
overflow: hidden;
border: 0;
}
.container div:nth-child(1) {
width: auto;
height: 25px;
padding: 5px 20px;
background-color: white;
display: inline-block;
}
.container div:nth-child(2) {
margin-left: auto;
height: 25px;
padding: 5px 20px;
background-color: ghostwhite;
border-bottom: 1pt solid black;
display: inline-block;
}
<div class="container">
<div>Div Left</div>
<div>Div Right</div>
</div>
I am trying to achieve the box-shadow inside the right-border, currently everything is working fine except the shadow is getting display outside the right border. Following is the js-fiddle sample code I have tried...
http://jsfiddle.net/5y1guk6d/1/
HTML:
<div class="header">
<div class="header-bar">
<h1 class="title">Page title</h1>
</div>
</div>
<div class="main">
<div class="left-bar">
<div class="menu">
Menu Content
</div>
</div>
<div class="content">
Main content area
</div>
</div>
CSS:
.header {
width: 100%;
height: 40px;
top: 0;
color: white;
}
.header-bar {
height: 100%;
overflow: hidden;
background-color: #009BE1;
}
h1.title {
display: inline-block;
font: bold 16px Arial, sans-serif;
margin: 0 5px 0 15px;
position: relative;
top: 25%;
}
.main {
width: 100%;
overflow: hidden;
position: absolute;
top: 48px;
bottom: 0;
}
/* left bar */
.left-bar {
width: 160px;
float: left;
padding:10px;
background-color: #F0F0F0;
height: 100%;
position: relative;
border-right:1px solid #aaa;
box-shadow:5px 0 5px #ccc;
}
.content {
overflow: hidden;
left: 12px;
padding: 5px 17px 5px 5px;
height: 100%;
position: relative;
}
Appreciated your help..
If you want the box shadow to appear inside of the element instead of outside, use inset. Then you want to invert the x-offset so it appears on the right side.
box-shadow:inset -5px 0 5px #ccc;
http://jsfiddle.net/5y1guk6d/3/