I know this question has been asked and aswered before, but for some reason, the answers are not working for me; so any help is much appreciated.
I'm creating a hybrid mobile app and I need to add an clickable icon (SVG) inside an input field. Even though I have managed to add the icon, when I test my design in different screens, the icon doesn't not respect the position I need it to be in.
Here are some shots: This is how it's supposed to look in all screens and this is what it looks like in landscape mode, for example.
Here's my code: https://codepen.io/paulamourad/pen/djXvxq
CSS:
.wallet-body {
width: 100%;
margin: 0 auto;
}
.form-group {
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
float: left;
width: 11%;
margin-top: -39px;
margin-left: 120px;
position: relative;
}
HTML:
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
.wallet-body {
width: fit-content;
margin: 0 auto;
float: left;
}
.form-group{
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
Related
Problem: JSFiddle
I want to center the whole form and created a class called 'center' with the given attributes. But after adding the center class to the form in JSFiddle, the fontawesome-icons stay on the left and do not move. They should be positioned "inside" the input element left to the text. Therefore, to make place for the icon, I also added a padding on the left.
Can somebody give me the solution to fix this problem that both icons stay on the left because of centering? I really cannot find out why it is not working and it already took so much time :/
Thanks.
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin-bottom: 20px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>
The .box elements are divs and therefore naturally have a width of 100% of the parent element.
A simple solution would be to give them a fixed width equal to that of your inputs and centre them using left and right margins of auto:
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin: 0 auto 20px;
width: 180px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>
it occurs because
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
you can use position initial for it.
I've added the following to the css and html file:
.currencyinput {
border: 1px inset #eee;
}
.currencyinput input {
border: 0;
}
<td><span class="currencyinput">$<input type="text" name="amount"></span></td>
And my resulting page shows the $ and then the textbox on a new line below it. I was intending the $ to be in the textbox.
Appreciate any insight on this. Thanks!
Consider simulating an input field with a fixed using a span with a border around a border less input field. Here's a basic example:
<div class="container">
<h3>Basic form example</h3>
<div class="form-group">
<div class="input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon input-icon-right">
<i>€</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-bitcoin"></i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<h3>Example using <code>form-inline</code></h3>
<div class="alert alert-danger visible-xs">This window needs to be made
larger to see the inline example.</div>
<form class="form-inline">
Some text here
<div class="form-group input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
CSS:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}
use this css for remove focus border input:focus{outline: none;}
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
.currencyinput input:focus {
outline: none;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>
I want to have something like this
instead I
My html code is this
`
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<article class="goright">
<input type="name" name="Name" placeholder="" style="width: 140px"><br>
<input type="lastname" name="lastname" placeholder="" style="width: 140px"><br>
<input type="Place" name="Place" placeholder="" style="width: 140px"><br>
</article>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
</form>
</div>
</div>
</div>
And this is my CSS
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: -300px;
float: right;
width: 40%;
height: 40%;
overflow: auto;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
overflow: hidden;
}
article#goright
{
float: right;
}
aside#sidebar
{
float: left;
}
aside#sidebar .quote input, aside#sidebar .quote textarea
{
width: 90%;
padding: 5px;
}
so I tried to look up this thing here but I could not find an answer that works for me, I tried a lot of variations but nothing really works and I can not get the result, I only managed to get one side that is floated right and aside bar that is left but aside is under previous bar.
So, can you give me a hint or code that can help me achieve the desired result ?
You don't need to use <aside> and other CSS tweaks to achieve the structure.
Just move the <textarea> above the <input> tags and add a float:left class and float:right class to them respectively.
The width of the form is inherited from the .modal class.
Also <input> tags type attribute used are invalid. Supporting type attributes are as mentioned in: https://www.w3schools.com/tags/att_input_type.asp
Also <textarea> does not have a type attribute by default.
.modal {
width: 40%;
height: 40%;
overflow: auto;
}
.align-right {
float: right;
}
.align-left {
float: left;
}
.modal-content {
background-color: #fefefe;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
input {
margin-bottom: 5px;
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<textarea name="Name" placeholder="Textarea" style="height: 80px" class="align-left"></textarea>
<input type="text" name="Name" placeholder="Input A" style="width: 140px" class="align-right" />
<input type="text" name="lastname" placeholder="Input B" style="width: 140px" class="align-right" />
<input type="text" name="Place" placeholder="Input C" style="width: 140px" class="align-right" />
</form>
</div>
</div>
</div>
Here's an example of what you're trying to achieve -
.wrapper {
max-width: 500px;
}
.textarea-wrapper,
.input-wrapper {
float: left;
width: calc(50% - 10px);
}
.textarea-wrapper {
margin-right: 20px;
}
.textarea {
width: 100%;
height: 90px;
}
.input {
margin-bottom: 16px;
}
<div class="wrapper">
<div class="textarea-wrapper">
<textarea class="textarea"></textarea>
</div>
<div class="input-wrapper">
<input type="text" class="input" placeholder="Text 1">
<input type="text" class="input" placeholder="Text 2">
<input type="text" class="input" placeholder="Text 2">
</div>
</div>
Here's a link.
https://codepen.io/aphextwix/pen/MmZxjR
Take a look at this fiddle: https://jsfiddle.net/5xw7ssa4/
But you have some mistakes in your css:
Height should not be in %.
Both container must float to right.
Do not forget to clear:both after last floating element.
article#goright must be article.goright
In your html you have type="name" for example. It must be type="text".
Hi there you should review both your html markup and css as well bellow are my suggestions
css
.modal {
position: relative;
z-index: 1;
padding-top: inherit;
width: 50%;
height: 123px;
margin: 0 auto;
margin-top: 20px;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
form {
width: 100%;
padding: 10px 0px;
}
.close{
position: absolute;
right: 0;
color: #fff;
background: #000;
padding: 5px;
z-index: 3;
}
/*a classis identified by a "." an id is identified by an "#" so article#goright is wrong you should have wrote article.goright*/
article.goright {
float: left;
width: 50%;
}
aside#sidebar {
float: left;
width: 50%;
}
/* .quote is the form class aside is inside the form so instead of aside#sidebar .quote textarea you should write .quote aside#sidebar textarea */
.quote aside#sidebar input, .quote aside#sidebar textarea
{
width: 90%;
padding: 5px;
}
article.goright input {
width: 80%;
margin-bottom: 5px;
height: 20px;
}
/*very important to solve the issue*/
.clear{
width: 100%;
height: 0;
clear: both;
float: none;
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Page</title>
</head>
<body style="width:100%; margin: 0 auto; padding: 0; text-align: center;">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
<article class="goright">
<input type="name" name="Name" placeholder=""><br>
<input type="lastname" name="lastname" placeholder=""><br>
<input type="Place" name="Place" placeholder=""><br>
</article>
<!-- this is the div you need to have myModal div cover the div inside it since they are floating left -->
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
</html>
I have the following challenge. When an user is typing somehting in an input field, I want to show a reset button with a position center right of the input.
I am not able to change the html structure of the label, input, button and the error message. And I dont want to use browsers support. Does somebody has a creative idea how to do this? Thanks in advance.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
<a class="reset">x</a>
</div>
</div>
Outline
Wrap anything that you want to stay as it is now with an <div style="display: inline-block;position:relative;">. This creates a positioning context in which you can position anything afterwards. Then position your reset button with position: absolute and the offsets you need, inside and relative to the wrapper you created.
Here's a try at it, but I'm uncertain that I understood your scenario.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.input-wrapper {
position: relative;
display: inline-block;
}
.reset {
position: absolute;
right: 3px;
top: 7px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<div class="input-wrapper">
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
</div>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>
.form-group {
position: relative;
}
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.reset {
margin-left: -20px;
margin-top: 10px;
position: absolute;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>
I have a header containing an image and search box. Both header area and results area are separate divs .
Search box is in header area. In left side of results div there are some menu items. I need to align my search box with results start area.
In .tk-bl-header I have added margin-left=5em to work. But when I move to different screen resolution it gets misaligned.
.tk-bl-header .tk-header-search-area {
display: inline-block;
float: left;
width: 43.75%;
padding-left: 1.5625%;
padding-right: 1.5625%;
position: relative;
color: black;
margin-left: 5em;
}
.searchform-container .searchform {
margin-bottom: 1em;
}
header .tk-bl-header h1 #logo a {
text-decoration: none;
}
a.library-logo {
background: url("../abc.jpg") no-repeat scroll left top transparent;
width: 110px;
height: 100px;
}
a.logo-name {
margin-top: 10px;
font-size: 20px;
}
div#second-header {
display: inline-block;
height: 65px;
position: relative;
width: 100%;
/* overflow: hidden; */
}
<header class="tk-bl-header">
<div id="second-header">
<h1 id="logo">
ABCD
</h1>
<div class="tk-header-search-area">
<div class="tk-header-search-form">
<div class="searchform-container ">
<form id="" class="searchform" action="" method="get" data-filters="">
<fieldset>
<legend>Search</legend>
<input type="text" name="q" class="query" value='${query.value.display}' placeholder="Search documents.." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
<input type="submit" class="submit" value="Search">
</fieldset>
</form>
</div>
</div>
</div>
<div id="col-right-top" class="sidebar col"></div>
</div>
</header>