I'm creating some editable card as follow. When I click on the edit icon on first card, the shadow will show and it makes my div taller.
My problem is, can I make it so that when the shadow effect shows the other divs under it don't move/changes position like that. Also, this code is supposedly put on a snippet. When the shadow shows, it make the preview window (body) grow taller and things under it move downward. I want to make the window stays the same height before and after the shadow shows up.
Any help appreciated.
$(".card").click(function() {
if ($(this).val() == 0) {
$(this).addClass("clicked");
$(this).val(1);
}
else {
$(this).removeClass("clicked");
$(this).val(0);
}
});
$(".action").click(function() {
var thisCard = $(this).parent().parent();
thisCard.addClass("edit");
thisCard.css({"width": "238px"});
thisCard.find(".title").css({"display": "none"});
thisCard.find(".action").css({"display": "none"});
thisCard.find(".action-edit").css({"display": "table-cell"});
thisCard.find(".input-group").css({"display": "table-cell"});
if (thisCard.find(".input-sub-line").length == 0) {
thisCard.find(".input-main").val(thisCard.find(".title").text());
}
else {
thisCard.find(".input-main").val(thisCard.find(".title-main").text());
thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
}
thisCard.find(".input-main").focus();
thisCard.removeClass("clicked");
});
$(".check").click(function() {
var thisCard = $(this).parent().parent().parent();
thisCard.removeClass("edit");
thisCard.css({"width": "240px"});
thisCard.find(".title").css({"display": "table-cell"});
thisCard.find(".action").css({"display": "table-cell"});
thisCard.find(".action-edit").css({"display": "none"});
thisCard.find(".input-group").css({"display": "none"});
if (thisCard.find(".input-sub-line").length == 0) {
thisCard.find(".title").text(thisCard.find(".input-main").val());
}
else {
thisCard.find(".title-main").text(thisCard.find(".input-main").val());
thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
}
thisCard.removeClass("clicked");
});
$(".cancel").click(function() {
var thisCard = $(this).parent().parent().parent();
thisCard.removeClass("edit");
thisCard.css({"width": "240px"});
thisCard.find(".title").css({"display": "table-cell"});
thisCard.find(".action").css({"display": "table-cell"});
thisCard.find(".action-edit").css({"display": "none"});
thisCard.find(".input-group").css({"display": "none"});
thisCard.removeClass("clicked");
});
.card {
display: table;
width: 240px;
height: 70px;
border: transparent;
border-radius: 3px;
background-color: #FAFAFA;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 32px auto;
}
.card .content {
display: table-row;
width: 100%;
}
.card .content .title,
.card .content .input {
display: table-cell;
padding: 24px;
width: calc(100% - 36px);
font-size: 16px;
color: #333;
}
.card .content .input {
display: none;
}
input {
border: none;
font-size: 13px;
border-bottom: solid 1px #c4c4c4;
width: 100%;
}
input:focus {
outline-style:none;
box-shadow:none;
border-bottom: solid 1px #c4c4c4;
}
.card .content .action {
display: table-cell;
width: 36px;
padding: 24px 16px;
text-align: right;
}
.card .content .action-edit {
display: none;
width: 36px;
padding: 0;
border-left: solid 1px #c4c4c4;
vertical-align: top;
}
.check,
.cancel {
height: 34.5px;
text-align: center;
}
.action-edit > .check i,
.action-edit >.cancel i {
line-height: 35px;
font-size: 13px;
}
.cancel i {
color: #333;
}
.check i {
color: #00c983;
}
.check-tall,
.cancel-tall {
height: 45.5px;
}
.check-tall i,
.cancel-tall i {
line-height: 46px !important;
}
.cancel {
border-bottom: solid 1px #c4c4c4;
}
.card .content .action i {
font-size: 14px;
color: #333;
}
.card .content .action i:hover {
color: #00c983;
}
.clicked {
background-color: #CAF1FF;
box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}
.edit {
background-color: #fff;
border: solid 1px #00c983;
box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.subtitle {
font-size: 12px;
}
.subtitle-label {
color: #999;
}
.input-sub {
font-size: 12px;
}
.input-sub-line {
display: table-row;
width: 100%;
}
.input-sub-label {
display: table-cell;
width: 25%;
font-size: 12px;
color: #999;
}
.input-sub {
display: table-cell;
width: 100%;
}
.input-group {
display: none;
padding: 22px 24px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<div class="card" value=0>
<div class="content">
<div class="title">Education</div>
<div class="input-group"><input type="text" class="input-main"></div>
<div class="action"><i class="fas fa-pencil-alt"></i></div>
<div class="action-edit">
<div class="cancel"><i class="fas fa-times"></i></div>
<div class="check"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
<div class="caption">1-Attribute Card</div>
<div class="card" value=0>
<div class="content">
<div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
<div class="input-group">
<input type="text" class="input-main">
<div class="input-sub-line">
<div class="input-sub-label">Code</div>
<input class="input-sub" type="text"></div>
</div>
<div class="action"><i class="fas fa-pencil-alt"></i></div>
<div class="action-edit">
<div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
<div class="check check-tall"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
<div class="caption">2-Attributes Card</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm not 100% sure if I understood your question correctly, but the only movement I see is caused by the border that gets applied to .card. If you add an initial border to the .card before you edit it, the element won't increase in size and it won't move. I made the border transparent, so it is not going to be visible.
$(".card").click(function() {
if ($(this).val() == 0) {
$(this).addClass("clicked");
$(this).val(1);
}
else {
$(this).removeClass("clicked");
$(this).val(0);
}
});
$(".action").click(function() {
var thisCard = $(this).parent().parent();
thisCard.addClass("edit");
thisCard.css({"width": "238px"});
thisCard.find(".title").css({"display": "none"});
thisCard.find(".action").css({"display": "none"});
thisCard.find(".action-edit").css({"display": "table-cell"});
thisCard.find(".input-group").css({"display": "table-cell"});
if (thisCard.find(".input-sub-line").length == 0) {
thisCard.find(".input-main").val(thisCard.find(".title").text());
}
else {
thisCard.find(".input-main").val(thisCard.find(".title-main").text());
thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
}
thisCard.find(".input-main").focus();
thisCard.removeClass("clicked");
});
$(".check").click(function() {
var thisCard = $(this).parent().parent().parent();
thisCard.removeClass("edit");
thisCard.css({"width": "240px"});
thisCard.find(".title").css({"display": "table-cell"});
thisCard.find(".action").css({"display": "table-cell"});
thisCard.find(".action-edit").css({"display": "none"});
thisCard.find(".input-group").css({"display": "none"});
if (thisCard.find(".input-sub-line").length == 0) {
thisCard.find(".title").text(thisCard.find(".input-main").val());
}
else {
thisCard.find(".title-main").text(thisCard.find(".input-main").val());
thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
}
thisCard.removeClass("clicked");
});
$(".cancel").click(function() {
var thisCard = $(this).parent().parent().parent();
thisCard.removeClass("edit");
thisCard.css({"width": "240px"});
thisCard.find(".title").css({"display": "table-cell"});
thisCard.find(".action").css({"display": "table-cell"});
thisCard.find(".action-edit").css({"display": "none"});
thisCard.find(".input-group").css({"display": "none"});
thisCard.removeClass("clicked");
});
.card {
display: table;
width: 240px;
height: 70px;
border: transparent;
border-radius: 3px;
background-color: #FAFAFA;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 32px auto;
border: solid 1px transparent;
}
.card .content {
display: flex;
width: 100%;
max-height: 86px;
}
.card .content .title,
.card .content .input {
display: table-cell;
padding: 24px;
width: calc(100% - 36px);
font-size: 16px;
color: #333;
}
.card .content .input {
display: none;
}
input {
border: none;
font-size: 13px;
border-bottom: solid 1px #c4c4c4;
width: 100%;
}
input:focus {
outline-style:none;
box-shadow:none;
border-bottom: solid 1px #c4c4c4;
}
.card .content .action {
display: table-cell;
width: 36px;
padding: 24px 16px;
text-align: right;
}
.card .content .action-edit {
display: none;
width: 36px;
padding: 0;
border-left: solid 1px #c4c4c4;
vertical-align: top;
}
.check,
.cancel {
height: 34.5px;
text-align: center;
}
.action-edit > .check i,
.action-edit >.cancel i {
line-height: 35px;
font-size: 13px;
}
.cancel i {
color: #333;
}
.check i {
color: #00c983;
}
.check-tall,
.cancel-tall {
height: 45.5px;
}
.check-tall i,
.cancel-tall i {
line-height: 46px !important;
}
.cancel {
border-bottom: solid 1px #c4c4c4;
}
.card .content .action i {
font-size: 14px;
color: #333;
}
.card .content .action i:hover {
color: #00c983;
}
.clicked {
background-color: #CAF1FF;
box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}
.edit {
background-color: #fff;
border: solid 1px #00c983;
box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.subtitle {
font-size: 12px;
}
.subtitle-label {
color: #999;
}
.input-sub {
font-size: 12px;
}
.input-sub-line {
display: table-row;
width: 100%;
}
.input-sub-label {
display: table-cell;
width: 25%;
font-size: 12px;
color: #999;
}
.input-sub {
display: table-cell;
width: 100%;
}
.input-group {
display: none;
padding: 22px 24px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<div class="card" value=0>
<div class="content">
<div class="title">Education</div>
<div class="input-group"><input type="text" class="input-main"></div>
<div class="action"><i class="fas fa-pencil-alt"></i></div>
<div class="action-edit">
<div class="cancel"><i class="fas fa-times"></i></div>
<div class="check"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
<div class="caption">1-Attribute Card</div>
<div class="card" value=0>
<div class="content">
<div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
<div class="input-group">
<input type="text" class="input-main">
<div class="input-sub-line">
<div class="input-sub-label">Code</div>
<input class="input-sub" type="text"></div>
</div>
<div class="action"><i class="fas fa-pencil-alt"></i></div>
<div class="action-edit">
<div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
<div class="check check-tall"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
<div class="caption">2-Attributes Card</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
For the first box you can start by changing border to outline in the .edit class since that is adding 2px to the height.
This does not solve the second box where it has extra content inside the card. Might want to make the caption position: absolute;
Related
I am really struggling to move two div in a row.
I tried to display flex in row but when I do that the current width of my two div remain the same while I'd like not to change the final width of the parent element.
I also tried inline display but it does not work too...
I want to place the two div inside the div with class "statusDetails" on the same row without interfering the current width of the div with class "status".
the objective is to have something like the end of this screen:
Any help will be appreciated!
Thx,
EDIT: the fiddle example :
body {
background-color: #edebe9;
}
.ddl-container .ddl-list {
position: absolute;
display: flex;
flex-direction: column;
border-left: 3px solid #3286d5;
background-color: white;
z-index: 1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container>div {
cursor: pointer;
border: solid 3px transparent;
font-size: 1.1rem;
}
.horizontal-icon-menu .ddl-container>div:hover {
color: black;
}
/* .ddl-container:hover */
.horizontal-icon-menu .ddl-container .ddl-list {
right: 0;
border-left: 0px;
background-color: white;
z-index: 1;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container:hover>div {
background-color: white;
}
.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
background-color: #629924;
color: white;
}
.solid-border-bottom {
border-bottom: solid 1px #5e5e5e;
padding: 0px !important;
}
.statusDetails {
box-sizing: content-box;
}
.status div {
padding: 0px !important;
}
.statusDetails div>span {
text-transform: uppercase;
}
.statusDetails div span:last-of-type {
text-transform: lowercase;
}
<main>
<div class="horizontal-icon-menu">
<div class="ddl-container">
<div class="icon-param"><span class="username">ystalio</span></div>
<div class="ddl-list">
<div class="solid-border-bottom">
<div class="changeColorOnHover">Profil</div>
<div class="changeColorOnHover">Boîte de réception</div>
<div class="changeColorOnHover">Préférences</div>
<div class="changeColorOnHover">Déconnexion</div>
</div>
<div class="status">
<div class="statusDetails">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal">
test
</div>
</div>
</div>
</div>
</div>
</main>
Since you dont have a working example, I assume you only want to have two div side by side aligned.
I will suggest you using "Bootstrap Grid System" in this case;
Otherwise, for vanilla html and css:
try adding CSS:
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.col-sm-5 {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
And HTML class tag for:
<div class="status row">
<div class="statusDetails col-sm-5">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal col-sm-5">test</div>
</div>
See Snippet below:
body {
background-color: #edebe9;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.col-sm-5 {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.ddl-container .ddl-list{
width: 300px;
position: absolute;
display: flex;
flex-direction: column;
border-left: 3px solid #3286d5;
background-color: white;
z-index: 1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container > div {
cursor: pointer;
border: solid 3px transparent;
font-size: 1.1rem;
}
.horizontal-icon-menu .ddl-container > div:hover {
color:black;
}
/* .ddl-container:hover */
.horizontal-icon-menu .ddl-container .ddl-list {
right: 0;
border-left: 0px;
background-color: white;
z-index: 1;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container:hover > div {
background-color: white;
}
.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
background-color: #629924;
color: white;
}
.solid-border-bottom {
border-bottom: solid 1px #5e5e5e;
padding: 0px !important;
}
.statusDetails {
box-sizing: content-box;
}
.status div {
padding: 0px !important;
}
.statusDetails div > span {
text-transform: uppercase;
}
.statusDetails div span:last-of-type {
text-transform: lowercase;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<main>
<div class="horizontal-icon-menu">
<div class="ddl-container">
<div class="icon-param"><span class="username">ystalio</span></div>
<div class="ddl-list">
<div class="solid-border-bottom">
<div class="changeColorOnHover">Profil</div>
<div class="changeColorOnHover">Boîte de réception</div>
<div class="changeColorOnHover">Préférences</div>
<div class="changeColorOnHover">Déconnexion</div>
</div>
<div class="status row">
<div class="statusDetails col-sm-5">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal col-sm-5">
test
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I have the following html code:
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
and the css/less:
.rtm {
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
position: absolute;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
}
I tried to do like this in order to show the page-icon and page-title one near the other but how it is done now they are one over the other (the icon is on top of the title)
How can I solve this? Thanks
When you say "near each other" I am assuming you mean "beside each other".
You can add flexbox properties to #crumby-title. Then remove position and float properties from .page-icon and page-title. You can also remove height from .page-title
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart {
padding-top: 50px;
}
#crumby-title {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
font-size: 20px;
font-weight: 5px 10px 10px 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
Give float:left to .page-icon instead of position:absolute and add <div class="clear"></div> after page-title.
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
float: left;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
.clear{
clear:both;
}
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
<div class="clear"></div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
I want to show u another version of ankita pantel's put them in a table and add padding-top to Demand
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
padding-top: 30px;
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
<div class="demand page">
<div id="crumby-title">
<table>
<tr>
<td>
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
</td>
<td>
<div class="page-title">
Demand
</div>
</td>
</tr>
</table>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
All the cool kids are using flex box.
display:flex; flex-direction:row; makes the child items stack in a row. (flex-direction:row is default so you can skip that)
#crumby-title {
...
display: flex;
flex-direction:row;
}
then you can (if you want) center the text with
.page-title {
....
display: flex;
align-items: center;
}
Fiddle
am trying to create a field of research. I want to add a logo in the input bar.
Here is my code:
.display-new-chat-window {
.new-chat-window {
display: block;
text-align: center;
z-index: 2;
input:focus {
outline-color: $blue;
}
.new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
margin-top: 10px;
padding-left: 15px;
width: 200px;
z-index: 1;
}
}
}
<div class="new-chat-window">
<i class="fa fa-search"></i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>
Probably something like this, where L is the logo:
.new-chat-window {
position: relative;
width: 200px;
display: block;
margin: 10px auto;
text-align: center;
z-index: 2;
}
.new-chat-window .fa {
position: absolute;
top: 7px;
left: 10px;
font-weight: bold;
font-style: normal;
}
input:focus {
outline-color: $blue;
}
.new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
padding-left: 30px;
width: 100%;
z-index: 1;
}
<div class="new-chat-window">
<i class="fa fa-search">L</i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>
You can accomplish this using the background property:
input {
background: url(https://path.to/image);
}
.display-new-chat-window .new-chat-window {
display: block;
text-align: center;
z-index: 2;
}
.display-new-chat-window .new-chat-window input:focus {
outline-color: $blue;
}
.display-new-chat-window .new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
margin-top: 10px;
padding-left: 15px;
width: 200px;
z-index: 1;
background: url(https://unsplash.it/15) no-repeat scroll 0 center;
}
<div class="display-new-chat-window">
<div class="new-chat-window">
<i class="fa fa-search"></i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>
</div>
Sorry If I misunderstand your point of your question
In this example, I use my own code
html
<input type="text" class="input-logo" placeholder="Paypal id/email">
css
.input-logo{
background-image:url(https://fx-
rate.net/images/favi_transfer/paypal.com.png);
background-position:right;
background-repeat:no-repeat;
padding-left:1px;
font-size: 16px;
width: 200px;
}
for your code, you add my input-logo class and you can style it from there.
Look at:
https://codepen.io/ronalto7777/pen/rzPjoR
I have a problem with my input.
As you can see, my input is taking up too much space. It doesn't have margin or padding.
Here's my code (I am using Boilerplate v5.3.0).
How can I fix it so it just takes the space that it needs?
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
When you float an element, you remove it from the normal flow of the document. As a result, other block elements don't respect their space.
Since both elements on the line (Modelo and Anio) are float: left, the next block element (Email) doesn't see them, and takes their space. So the Email div now lies hidden under the split elements.
However, the input element inside the Email div is not a block element. It's an inline element, by default. And inline elements respect the space of floated elements. (This is how text is able to wrap around floated images.)
So in your code, while the Email div shifts below the split element (on the z-axis), the input inside the Email div stays below the split element (on the y-axis).
When you highlight the Email element in dev tools, it illustrates this split across two rows.
One solution is to give the Email div display: inline-block and width: 100%.
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
Another solution is to add clear: both to the Email div. (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
In your question you are showing the properties of div, check properties of a tag inside div. The a tag is having padding:10px;.
This is happening because a.selectButton has padding of 10px. You can remove it completely or you can only remove the left padding to fix the problem.
a.selectButton {
padding-left: 0;
}
Insert the above code in your style tag to fix the problem.
I'm trying to make this footer, where every element is vertically aligned. But for some reason, copyright for example isn't vertically aligned.
Can anyone help me finding out what is wrong? Or what I am missing?
Footer HTML:
<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<img src="/www/assets/newImages/footer/facebook.png">
<img src="/www/assets/newImages/footer/twitter.png">
<img src="/www/assets/newImages/footer/google plus.png">
<img src="/www/assets/newImages/footer/pinterest.png">
<img src="/www/assets/newImages/footer/tumblr.png">
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">
</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>
Footer CSS:
#footerSocial {
display: inline-block;
text-align: center;
width: 100%;
margin-top: -25px;
}
#socialNetwork {
display: inline-block;
float: left;
font-size: 10px;
color: #747474;
}
#footerNewsletter {
display: inline-block;
margin: 0 auto;
font-size: 10px;
color: #747474;
}
#footerNewsletter #subscribe_ok {
margin-bottom: -5px;
}
#copyright {
display: inline-block;
float: right;
font-size: 10px;
color: #747474;
}
#footerSocial {
border: 1px solid black;
}
#socialNetwork {
border: 1px solid green;
}
#footerNewsletter {
border: 1px solid red;
}
#copyright {
border: 1px solid blue;
}
Fiddle Demo
You can use a table layout to achieve what you want :
#footerSocial { display: table; text-align: center; width: 100%; font-size: 10px;color: #747474;}
#footerSocial > div {display: table-cell; }
#footerNewsletter #subscribe_ok { margin-bottom: -5px; }
#footerSocial { border: 1px solid black; }
#socialNetwork { border: 1px solid green; }
#footerNewsletter { border: 1px solid red; }
#copyright { border: 1px solid blue; }
Example