Keep div certain distance from another div - html

I have a login box DIV and below that another login button DIV which is 1% margin top from the Login Box DIV.
The login box div has these styles:
.login-box {
height: 39%;
width: 100%;
}
.login-box-wrap {
width: 30%;
height: 98%;
margin: 0 auto;
border: 1px solid #3f3f3f;
background-color: #609ac4;
border-radius: 5px 5px 5px 5px;
margin-top: 1%;
min-width: 250px;
max-width: 500px;
max-height: 350px;
min-height: 100px;
}
.logintextbox {
background-color: transparent;
border: none;
border-bottom-color: rgba(176, 221, 245, 1);
border-bottom-style: solid;
border-bottom-width: 2px;
width: 98%;
height: 32%;
font-size: 1.2em;
font-family: open sans;
color: white;
padding-left: 2%;
}
Then when i shrink it alittle more then button overlaps the box like this:
This is the login button styles:
.login-button {
height: 5%;
width: 100%;
margin-top: 1%;
position: fixed;
}
.login-button-wrap {
width: 30%;
height: 100%;
margin: 0 auto;
min-width: 250px;
max-width: 500px;
min-height: 20px;
max-height: 31px;
}
#btnLogin {
height: 100%;
width: 100%;
background: linear-gradient(#73afda,#609ac4);
border: 1px solid #3f3f3f;
border-radius: 5px 5px 5px 5px;
font-family: Arial;
color: white;
font-size: 15px;
}
How can i keep the button around 10px/1% margin top from the box at all resolutions
**EDIT: **
Here is the HTML
<div class="login-box">
<div class="login-box-wrap">
<input id="txt_client_reference" type="text" class="logintextbox" placeholder="Client Reference" />
<input id="txt_postcode" type="text" class="logintextbox" placeholder="Postcode" />
<input id="txt_date_of_birth" type="text" class="logintextbox" placeholder="Date of Birth" />
</div>
</div>
<div class="login-button">
<div class="login-button-wrap">
<asp:Button ID="btnLogin" runat="server" Text="Log in" CssClass="loginButton" OnClientClick="checkForm(); valid_postcode()" />
</div>
</div>

I might be a little far off on this one, but you have position fixed there, which doesn't really care about your margin anymore.

Related

How to align a Div to float right and middle?

I am building a custom chips control and facing a problem in aligning a close div to the right and middle. Can someone help please. I want to align the close button vertically middle if the text wraps to multiple lines
<div class="chips-container">
<div *ngFor="let item of items; let i = index" class="chips">
<div class="chip-text">{{ item }}</div>
<div class="chip-close">x</div>
</div>
<input
class="input-chips"
(keyup.enter)="add($event)"
(keyup)="autogrow($event)"
style="width: 15px"
/>
</div>
My Style
.chips-container {
border: 1px solid gray;
height: auto;
min-height: 30px;
width: 230px;
position: relative;
}
.chips {
background-color: rgb(236, 236, 236);
border: 1px solid rgb(124, 124, 124);
border-radius: 14px;
margin: 3px;
padding-left: 3px;
height: auto;
display: inline-block;
}
.chip-text {
display: inline-block;
vertical-align: middle;
word-wrap: break-word;
}
.chip-close {
background-color: rgb(204, 204, 204);
height: 20px;
width: 20px;
border-radius: 50%;
//display: inline-block;
text-align: center;
margin-left: 2px;
float: right;
}
I replaced my Divs with table layout and it looks good, however, my input text control aligns in the bottom
<div class="chips-container">
<table
*ngFor="let item of pgFilters[i].value; let i = index"
class="chips"
>
<tr>
<td class="chip-text">{{ item }}</td>
<td><div class="chip-close">x</div></td>
</tr>
</table>
<input
style="width: 15px"
/>
</div>
Use positioning, put relative position on the parent element, in your case: .chips, and then relative position on the .chip-close, and then position it as you wish. Btw also added padding-right on the text itself, just so the word wouldn't overlap with the x icon.
.chips-container {
border: 1px solid gray;
height: auto;
min-height: 30px;
width: 230px;
position: relative;
}
.chips {
background-color: rgb(236, 236, 236);
border: 1px solid rgb(124, 124, 124);
border-radius: 14px;
margin: 3px;
padding-left: 3px;
height: auto;
position: relative;
}
.chip-text {
display: inline-block;
word-wrap: break-word;
padding-right: 20px;
}
.chip-close {
background-color: rgb(204, 204, 204);
height: 20px;
width: 20px;
border-radius: 50%;
text-align: center;
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
}
<div class="chips-container">
<div *ngFor="let item of items; let i = index" class="chips">
<div class="chip-text">this is just a test tjak jldskfds lsdjkf kjdf eljf lsadjfoi lajkdfoasdfkj </div>
<div class="chip-close">x</div>
</div>
<input
class="input-chips"
(keyup.enter)="add($event)"
(keyup)="autogrow($event)"
style="width: 15px"
/>
</div>

Make image appear inline with a div within an outer div using css

I am trying to place an image to the right of a pseudo input box using css to imitate Apple's iMessage app. However, the image keeps displaying below the pseudo input box as follows:
Most answers suggest using display:inline-block and I have put this in the class for both the outter and inner div with no luck. (Have also tried float:left, float:right and display:inline-block on image and there is no difference.)
How can I get the arrow to appear to the right of the pseudo input box as the microphone image is below?
Here is my code for the input field:
.inputbox {
border-radius: 20px;
min-height: 30px;
width: 300px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px #EEE;
display: inline-block;
}
.inputBoxInner {
border-radius: 20px;
min-height: 30px;
width: 240px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px #EEE;
height:" auto";
display: inline-block;
}
.inputBoxInner:empty:not(:focus):before {
color: lightgrey;
font-family: helvetica;
content: attr(data-placeholder)
display: inline-block;
}
<div class = "inputBox" contentEditable="true"><div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing"></div><input type="image" id="image" alt="Send"
src="/images/arrow.png" width="30" height="30 style="float:right"; "></div>
The code has a problem:
And this code can resolve the problem:
True code:
inputBox {display: grid; grid-template-columns: 100px 100px}
This should do it for you
.inputbox {
border-radius: 20px;
min-height: 30px;
width: 300px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px rgb(0, 0, 0);
}
.inputBoxInner {
border-radius: 20px;
min-height: 30px;
width: 240px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px rgb(131, 131, 131);
height: auto;
display: flex;
justify-content: end;
align-content: center;
}
.inputBoxInner:empty:not(:focus):before {
color: rgb(255, 0, 0);
font-family: helvetica;
}
<body>
<div class = "inputBox" contentEditable="true">
<div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing">
<input type="image" id="image" alt="Send" src="image.png" width="30" height="30" style="float:right">
</div>
</div>
</body>

Sliders input[range] not showing up in Edge but show up in every other browser fine. Driving me spare

Sliders input[range] not showing up in Edge but show up in every other browser fine. Driving me spare.
It's probably something simple, hopefully, but I've never used input[range] before.
Any help greatly appreciated.
In Edge/IE it looks like this:
Edge/IE version
Chrome, Safari and Firefox
#sliders {
text-align: center;
padding: 7px 0px;
width: auto;
}
#sliderX1,
#sliderX2 {
display: inline;
width: auto;
}
.Xslider {
display: inline;
position: relative;
margin: 10px 4px;
padding: 10px 4px;
border: 1px dotted #006699;
border-radius: 4px;
min-width: 45%;
}
.deadzone {
position: absolute;
top: 0.4rem;
left: 2rem;
background: rgba(0, 100, 150, 0.4);
width: 2rem;
height: 1.4rem;
border-radius: 2px;
}
<div id="sliders">
<datalist id="plus-stopsX">
<option>200</option><option>400</option><option>600</option><option>700</option><option>800</option><option>900</option><option>1000</option>
</datalist>
<datalist id="minus-stopsX">
<option>-200</option><option>-400</option><option>-600</option><option>-700</option><option>-800</option><option>-900</option><option>-1000</option>
</datalist>
<div class="Xslider">
<div class="deadzone"></div>
<label for="sliderX1">X1</label>
<input id="sliderX1" type='range' min="0" max="1000" value="300" step="10" list="plus-stopsX" onchange="changeitem();">
</div>
<div class="Xslider">
<label for="sliderX2">X2</label>
<input id="sliderX2" type='range' min="-1000" max="0" value="-200" step="10" list="minus-stopsX" onchange="changeitem();">
</div>
</div>
Try to set the fixed or percent value for the sliderX1 and sliderX2's width property, instead of using the auto.
#sliders {
text-align: center;
padding: 7px 0px;
width: auto;
}
#sliderX1,
#sliderX2 {
display: inline;
width:15%;
}
.Xslider {
display: inline;
position: relative;
margin: 10px 4px;
padding: 10px 4px;
border: 1px dotted #006699;
border-radius: 4px;
min-width: 45%;
}
.deadzone {
position: absolute;
top: 0.4rem;
left: 2rem;
background: rgba(0, 100, 150, 0.4);
width: 2rem;
height: 1.4rem;
border-radius: 2px;
}
Then, in Edge/IE browser it looks like this:

I added Doctype tag and changed button's height

<div class="searchbox">
<form>
<input type="text" name="src-txt" class="src-txt"/>
<input type="submit" value="" name="src-btn" class="src-btn"/>
</form>
</div>
.searchbox {
float: left;
width: 35%;
height: 30px;
margin-top: 25px;
margin-left: 3%;
border: 1px solid red;
}
.src-txt {
float: left;
width: 80%;
height: 100%;
border: 2px solid #3682c4;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 5px;
}
.src-btn {
float: left;
width: 15%;
height: 100%;
background-color: #3682c4;
background-image: url("../content/src_img.png");
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
This is code it's working fine but after I add !DOCTYPE html at head search button's height decreased.
I can't understand what changed.
What is the reason?
What should I change on my code?
Couldn't you just increase the height after adding the !DOCTYPE html?
Is your html tag set to 100% height? Sometimes that has caused issues with my code.

Why inner div container overflows?

From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>