How would I make the button connect to the input, there is an awkward gap I don't know how to fix.
#ask {
padding: 10px 10px 10px 6px;
font-size:45px;
background-color:#FAFAFA;
min-width: 400px;
padding: 0 auto;
border-radius: 5px;
}
#button {
text-align:center;
}
</style>
<input id="ask" type="text" placeholder = "Ex: how tall is the gateway arch" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Ex: how tall is the gateway arch'"/>
<input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="50.5px" padding = "0px"/>
Use CSS float:left to get input & image side by side.
input, img {
float:left;
}
Please check this fiddle: http://jsfiddle.net/hnj604pr/
Wrap your input tags in a div like this:
<div>
<input....>
<input....>
</div>
This way the browser will align them for you.
You also might want to consider changing your second input tag to use the button or submit tag.
Related
There is a side bar with a couple of labels and input. I want to remove the space between a pair of label and input. How to remove the space?
Space between label and input.
Here is the main part of html
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label>Name</label>
<input type="text" placeholder="Name">
</div>
<div class="sidebar-input-wrapper">
<label>Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
The only way to tackle this issue is by setting margin or padding to the two elements.
I would advise you to set padding & margin 0 for both label and input and if you still want to reduce the gap, sometimes you will probably need to set a negative margin which is not recommended but still does the job.
try this on your label
.label {
/*margin-bottom: -5px;*/
margin-bottom: 0px
}
In HTML
<label class="lable">...</label>
Again, this practice of adding a negative margin is highly discouraged.
EDIT: I missed the display:inline-block property, which someone in comments reminded me of
Above fix won't work, Making margin-bottom: 0 for the label will work though
a js fiddle:
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
.lable {
margin-bottom: 0px;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label class="lable">Name</label>
<input type="text" placeholder="Name" class="nameINput">
</div>
<div class="sidebar-input-wrapper">
<label class="lable">Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
Actually, this is caused by... New line in the code. That is new line between label and input. I am not sure why exactly this new line is being displayed, but I've encountered similar behavior even when the are in different order, when it can be rendered as space.
In fact, even in the snippet, if you try selecting the label text and then move your mouse slightly down to where that "extra space" is you will see how selection increases by 1 character of "nothing".
I thought I was seeing things, but https://www.tutorialrepublic.com/faq/how-to-remove-the-space-between-inline-block-elements-in-css.php actually suggests removing those new lines to remove the extra space in the 1st method shown on page.
So... I guess we should just be careful with extra new lines in our code. Or use flex on parent as https://www.geeksforgeeks.org/how-to-remove-the-space-between-inline-block-elements/ suggest (font-size: 0 does not always work for me)
If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these.
I was looking for a way to display the value of an
<input type="submit">
on 2 lines, so potentially add a line break in it, but i tried multiple stuff such as :
<br>
\r\n
\n
The result should be like this (On the right side of the picture) :
Nothing works. Anyone got a clue on this ?
Add this to your css:
A white-space property will allow to have input in multiple lines
input[type="submit"] {
white-space: normal;
width: 150px;
float:right;
text-align: right;
}
<input type="submit" value="J'essaie gratuitement 30 jours" />
Two other methods are
<button type="submit">Multiple line<br/>input</button>
and
using
carriage return in between the input value as:
<input type="button" value="Multiple line
input" style="text-align:center;">
The last method however doesn't work in IE10
Use button instead of input:
.right-aligned {
text-align: right;
}
<button type="submit" class="right-aligned">Text <br /> broken </button>
Buttons can accept a variety of other tags inside, such as <br />, <span>.
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).
I think you try this in HTML:
Just as example help for you:
<input type="button" value="Really
Tall
Button">
This is working for me:
div.full {
width:500px;
background-color:grey;
}
div.left {
float:left;
width:60%
}
button {
width:40%;
text-align:right;
cursor:pointer;
}
div.underline {
width:100%;
}
<div class='full'>
<div class='left'>
there is a part of text
</div>
<button>J'essaie gratuitement
<div class='underline'>30 jours</div>
</button>
</div>
I just added some CSS to keep the size of the button. and line breaks are not a very good practice. You'd better do it with css.
Alternatively, use a standard <a> or <span> tag.
var submits = document.getElementsByClassName('submit');
for (var i = 0; i < submits.length; i++) {
submits[i].addEventListener('click', function() {
alert('submit!');
document.getElementById('form_to_submit').submit();
});
}
.submit {
text-decoration: inherit;
color: inherit;
display: inline-block;
border: 1px solid #222;
border-radius: 2px;
padding: 2px 4px;
background: #eee;
cursor:pointer;
text-align:right;
}
<p>J'essaie gratuitement<br>30 jours</p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.