I'm making a search bar with a submit button. Whenever I link the input box via a class to my css document, it misaligns the box and button.
Here's what I mean:
What I Have
When I remove the class, it re-aligns the box and button but removes my formatting.
This is what I need, but with formatting:
What I need
This is my HTML:
<div class="search">
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
This is my CSS:
.search {
padding: 7.5px;
font-size: 15px;
border-radius: 4px;
border: none;
margin-top: 7px;
margin-right: 200px;
float: right;
}
It should align the search box to the right of the border as well, like this:
Formatting
How do I fix this?
Apologies if I've not explained it very well, so let me know if you need clarification.
Thanks!
you should put a id in the button and then recadre it in the css.
Use flexbox:
.search {
display: flex;
padding: 7.5px;
font-size: 15px;
border-radius: 4px;
border: none;
margin-top: 7px;
margin-right: 200px;
float: right;
justify-content: space-between;
}
.fa-search {
width: 40px; //or fit-content or some other sizes
}
for direction of your elements you can do many things but you should read this link about flexbox and its details.
Or this.
Related
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
</div>
Above are my html code and InputBox is a component of react which has a textArea nested between fieldset
.formContainer {
display: flex;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 0px;
border-style: none;
width: 100%;
max-width: 100%;
}
The desired pattern is two textarea in the fieldset aligns side by side with 50% width. I don't understand why my code shrinked two textarea and float to the left, please refer to the attached screencap , of the textarea and how could i fix that . Please kindly advise.
and your code do something?
I don't know react but I see that you put <div className="formContainer">. In html corect is <div class="formContainer">. Also on the InputBox you need to set a class:
as I said, I don't know react, but if you want to arrange 2 objects in the same row with css you need to put to the main container
display: flex;
flex-direction:row;
Also you need to set a smaller width to the .inputBox, if you put 100% is impossible for them to be aligned next to each other
I'm not familiar with React InputBox per se, but it looks to me like you simply haven't assigned you .inputBox class, to the inputBox component.
Maybe it should be something like this:
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} className="inputBox" />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} className="inputBox" />
</div>
Outside of that I put together a quick plain HTML mockup of what you (I think) are trying to achieve:
.formContainer {
display: flex;
gap: 10px;
}
fieldset {
position: relative;
padding: 0;
margin: 0;
height: auto;
border: none;
}
fieldset label {
position: absolute;
top: -15px;
left: 7px;
background: white;
padding: 6px;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 10px;
padding: 5px 12px;
}
<div class="formContainer">
<fieldset>
<label for="questions">Questions</label>
<textarea name="questions" rows="3" cols="20" class="inputBox" placeholder="Questions"></textarea>
</fieldset>
<fieldset>
<label for="solutions">Solutions</label>
<textarea name="solutions" rows="3" cols="20" class="inputBox" placeholder="Solutions"></textarea>
</fieldset>
</div>
Hopefully that will be enough to help you out a bit there?
Also, here is a codepen to see the mockup working:
I would like to make a dynamic form, that is, the form will change its size dynamically, according to the elements contained within it.
code example
.myForm {
display: block;
vertical-align: top;
border: 1px solid #999;
border-radius: 3px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma;
color:grey;
font-size: 12px;
padding: 10px;
padding-bottom: 35px;
background:#ECEEE9;
text-align: center;
}
<body>
<form class="myForm" id="noteForm" name="noteForm" METHOD="POST">
<h1>Add a note</h1>
<h2>Formatting</h2>
</form>
The outer sides of the form (border if you may) should just wrap around the text nicely, when the text gets longer, the form gets longer... at the moment it is just too wide to my liking.
I think you need to add display: inline-block; to .myForm
I have created a simple form with two fields, Username and password and a Log in buttion which use CSS.
I am trying to centre the form and its labels. current it centres the field boxes but not the labels, it looks like this: http://jsfiddle.net/zkzh66n0/
I think its something to do with the other CSS styles because when I tried the style on its own in fiddle it worked: http://jsfiddle.net/zkzh66n0/1/
HTML:
<div id ="form">
<form action = "entryformlogon.php" method="post">
<label for = "user">Username</label>
<input type ="text" name ="Username"><br>
<label for ="password">Password</label>
<input type ="password" name = "Password"><br>
<input type = "submit" name ="loginbutton" value ="Log in">
</form>
</div>
CSS:
label{
float: left;
width: 120px;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
#loginbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
#form {
text-align: center;
position: relative;
top: 100px;
}
Replace float: left with display: inline-block, then the width and margin work. Also, if you want to refer to the loginbutton via #loginbutton, you have to set its id attribute in addition to the name, because that is what this selector refers to.
fiddle
The relevant CSS:
label{
display: inline-block;
width: 120px;
text-align: left;
}
#loginbutton{
display: inline-block;
margin-left: 28px;
margin-top: 5px;
width: 90px;
}
I also changed the buttons CSS to include display: inline-block so the margin can be set so it lines up with the inputs.
try this
http://jsfiddle.net/zkzh66n0/2/
remove float: left; from label.
if you need space in labels and input box try to give padding like below fiddle
http://jsfiddle.net/zkzh66n0/3/
I am wanting to make a form where all the fields, and the input buttons are perfectly horizontally aligned. I tried setting margin: 0 auto on all the items (after resetting the css) but it seems like the length of the text fields make it so the items do not look horizontally center (the input button takes up much less space). Is there an easy way to offset this difference in widths without using absolute positioning (I want this to be responsive).
Here is the html:
<h1>
Please upload your file
</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multiple" ><br>
<input type="submit" value="Upload">
</form>
And the css:
h1, form {
display: block;
text-align: center;
color: red;
margin-top: 1.2em;
}
h1 {
font-size: 2em;
margin-top: 2em;
margin-bottom: 1em;
}
p {
margin-top: .2em;
margin-bottom: 1em;
}
input {
display: block;
margin:0 auto;
}
input[type=submit] {
font-size: 2em;
}
And here is the issue I am mentioning. (I would like the choose files button centered)
Just add a border to your input fields to make it clear that it's centre aligned:
JSFiddle
input {
display: block;
margin:0 auto;
border: 1px solid #cfcfcf;
}
You can try setting input to a relative position and reposition from there:
input {
display: block;
margin: 0 auto;
position: relative;
left: 25px;
}
I'm styling a form designed by a client with the following structure:
<div class="formRow">
<div class="fieldName">
Email
</div>
<div class="fieldInput">
<input .../>
</div>
</div>
The width of the form is 500px, but the fieldName div and the fieldInput div stack on top of each other instead of sitting side-by-side. This is because (at least in Chrome and Firefox), the fieldName div is getting a computed right-margin of 340px, taking up the entire width of the form.
I can't seem to override this behavior, either. Entering a margin-right of 10px does nothing. And setting the width of the div either to a hard number or a percentage only changes the inside width, not the strange right-margin.
What CSS headache am I running up against, here?
BTW, here's the CSS:
.formRow{
padding: 3px 0 3px 0;
position: relative;
height: auto;
width: 100%;
}
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
}
.fieldInput{
width: 200px;
}
One thing to take note of in your example code is that you are over-using DIVs. The same code could be written like this:
<div class="formRow">
<label class="fieldName">Email</label>
<input class="fieldInput" .../>
</div>
Or, even better:
<style type="text/css">
UL, UL LI
{
margin: 0px;
padding: 0px;
}
UL LI
{
list-style: none;
}
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
}
.fieldInput{
width: 200px;
}
</style>
<ul>
<li><label class="fieldName">Email</label>
<input class="fieldInput" .../></li>
...
</ul>
By using DIV tags for both sections you are violating the semantic meaning of the tag, which is "this section of the page is distinct from this other section." What you really are trying to do is just style your Form label differently from your Input and we already have tags to describe those.
try adding
.fieldName {display: inline}
or
.fieldInput {display: inline}
or both
If you add a display: inline; to each element, that will allow them to sit side-by-side. Because they're rendered as block elements by default, the browser puts them on their own lines.
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
display: inline;
}
.fieldInput{
width: 200px;
display: inline;
}