I'd like to center an icon in the y-middle of an input field.
What I've tried was something like this:
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
For desktop safari (Mac OS) it is working quite fine but on mobile devices like on my iPhone the icon does not seems to be centered at all:
How to fix this error occurring on mobile devices? Any help would be really appreciated. Thanks in advance!
Issue is caused by default margin and padding for input element. Default values are used by browser and need to be overwritten to be nulled. box-sizing: border-box; ensures borders which you add to #input are collapsed to it's height and don't exceed it.
Here you can read more about border-box.
Default browser CSS (example)
More about them.
Here already partially overwritten.
Key part
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Snippet
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
I see no reason that you can't just use a background image directly on the input? (I made some adjustments to the original example, but you get the idea)
#container {
width: 100px;
height: 50px;
}
#input {
line-height: 50px;
font-size: 15px;
border: none;
border: 1px solid #eae8ea;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: right center;
}
<div id="container">
<input id="input" placeholder="input" />
</div>
Related
i wanted to create a parallax, it display very well on android but when i open it on iphone or ios tablet the backgroun image dissapear. There is no problem on android or windows device. How can i fix this any idea and also when i click dropdown on android the dropdown menu works but on ios device it is not working. Here is domain. gokkar.com have a nice days thx
.parallaxSet{
background-attachment: fixed;/*background-size: 2261.76px 1178px;*/background-position: 50% -103.564px;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
<div class="parallax background section-height parallaxSet" style="background-image: url(assets/images/banner2.jpg);" data-diff="200">
<div class="parallax-wrapper">
<div class="parallax-scroll">
<div class="lastline">
<h5>GÖKKAR KURUMSAL</h5>
<h6>‘‘Şirketimiz 22 Aralık 1995 tarihinde kurulmuştur. 5 Ocak 1996 tarih ve 3951 sayılı Ticaret Sicili Gazetesi’nde yayımlanarak tescil edilmiştir.’’</h6>
İncele
</div>
</div>
</div>
</div>
<style>
.parallax {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
margin: 50px 0 0 0;
position: relative;
}
.parallax:after {
bottom: 0;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 60px;
margin-left: -60px;
z-index: 250;
}
.parallax.overflow,
.parallax.overflow .parallax-wrapper {
height: auto;
min-height: 100%;
}
.parallax.background {
background-repeat: no-repeat;
background-position: 50% 50%;
background-position: 50% 50%\9 !important;
}
.parallax.section-height {
height: 400px;
}
.parallax-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}
.parallax-scroll {
display: block;
position: relative;
}
.lastline {
width: 60%;
display: block;
margin: 5px auto 50px auto;
text-align: center;
padding: 100px 0;
}
.lastline > h5 {
font-size: 50px;
font-weight: 700;
color: #fff;
margin: 0;
padding: 0;
}
.lastline > h6 {
font-size: 20px;
font-weight: 100;
color: #fff;
margin: 25px 0;
}
.lastline > a {
width: 300px;
height: 55px;
display: block;
line-height: 50px;
font-size: 20px;
margin: 35px auto;
border: 1px solid #fff;
background: #fff;
color: #000;
font-weight: 500;
text-align: center;
}
.lastline > a:hover {
background: none;
color: #fff;
}
</style>
You are changing your header from fixed to position: static on devices with max-width: 800px
change:
#media screen and (max-width: 800px)
header {
height: auto;
position: static;
overflow: hidden;
border-bottom: 1px solid #eee;
display: block;
}
To:
position: fixed;
You will also have to add some margin top so the background image doesn't sit under the header.
IOS deactivated the "background-attachment:fixed" feature to reduce the costs on mobile devices.
Your only option is to use background-attachment:scroll. That dosen't the same effect as you wanted but you could do a workaround with some JavaScript as you can see here
The better way:
Use a Media Query and show a Single image with a fixed position.
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
i need to position 2nd element is next to the first element.So i set top value as 100%. the starting point of 2nd element is varies when device pixel ratio as 1.5.
Machine : Lenovo YOGA 500,
Scale : 150%,
Resolution: 1920 * 1080,
Browser: Except Firefox
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
</div>
this issue occurs only when device pixel ratio as 1.5.
the arrow class element start position varies based on device pixel ratio.i need to remove border top of red highlighted element
Kindly guide me any solution on this?
Thanks is advance
Definitely an interesting problem. The only way I was able to remove that extra line was to have another, slightly smaller div box within the arrow:
HTML
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
<div class="secondary-arrow"></div>
</div>
CSS
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
.secondary-arrow {
position: absolute;
width: 14px;
height: 7px;
left: 51px;
top: 100%;
background-color: #fff;
}
Here is my code:
.parent{
position: fixed;
border: 1px solid;
height: 40%;
width: 300px;
max-height: 200px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
height: 100%;
overflow-y: scroll;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>
As you see .second_child is out of parent. I want to keep it inside .parent element. How can I do that?
In other word I want to implement something like this:
.second_child{
height: 100% - 40px;
/* 40px: 20px of .first_child's height, 10+10px of .first_child's padding */
...
}
Note: I don't want to use neither calc() or box-sizing: border-box; .. Because they aren't supported in old browsers like IE7. So I'm looking for a third approach.
Would something like this work?
.parent{
position: relative;
border: 1px solid;
height: 100%;
width: 300px;
max-height: 200px;
min-height: 100px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
overflow-y: scroll;
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>
I'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle
Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>