I am using Found 4.04. I have a text box inside a form and I am trying to place some text right beneath the text box. However, there is a bit more space than I would like and I want to cut it down. I tried tweaking the margin, padding, etc. using Firebug and nothing has worked.
Is there a way to reduce the vertical space between the text boxes and their corresponding placement text? i.e., "Small text goes here" will move up closer to the text box.
Here is the JSFiddle link (you will have to shrink the code panel so you can see the boxes side by side): http://jsfiddle.net/R95JL/
<html>
<head><meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<link href="http://cdn.jsdelivr.net/foundation/4.0.4/css/foundation.min.css" rel="stylesheet">
</head>
<body>
<h4> Test form </h4>
<br> <br>
<div class="container">
<div class="row">
<form enctype="application/x-www-form-urlencoded" action="" method="post">
<div class="large-3 columns"> Text </div>
<div class="large-2 columns"><input type="number" value="" required="" name="f2" id="myid1"></div>
<div class="large-2 large-offset-1 columns end"><input type="number" value="" required="" name="f3" id="myid2"></div>
</form>
</div>
<div class="row">
<div class="large-offset-3 large-2 columns"><small> Small text goes here </small> </div>
<div class="large-2 large-offset-1 columns end"><small> Small text goes here </small> </div>
</div>
</div>
</body>
</html>
Just remove the margin from the input boxes in your CSS.
input { margin:0px !important; }
Your solution is unlikely a simple hack :
#myid2 {
margin-bottom:0px;
}
working demo
Also note that your form is float'ed....so you'll have to use
.clr{
clear:both;
}
and unlike the other answers, using input {margin:0px !important;} is not recommended as this will affect all the input fields and the form layout too... see what i mean!!
your input is having default margin. Use this rule in css:
input {margin:0px !important;}
Related
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
Why is it that the input box always pushes other elements to the next line(Or in some cases the input box pushes itself to the next line, to occupy 100% space)
I want to show an icon before the input box.
______
| icon | --------input box--------
|_____ | |---------------------------|
I tried the below code, but for some reason, <span> doesn't seem to work at all.
<div class="row">
<div class="medium-12 columns">
<span>
</span>
<i class="fi-page-edit"></i>
<span>
<input type="number" id="test"/>
</span>
</div>
</div>
In the above case the "icon" and the "input box" never stay in the same line, the input box pushes itself to the next line.
Why is it so?
Here's a JS fiddle example of a similar case: Foundation- Input box and span tag
P.S. I am trying to avoid putting the icon and the input-box in column like this
<div class="medium-1 columns">
icon
</div>
<div class="medium-11 columns">
<input type="number"/>
</div>
Is there a way to do it using <span>
Thanks in advance.
You should have given some demo.
You need to give some floating or display property to span.
2 ways:
span {
display:inline-block;
vertical-align:middle;
}
or
span {
float:left;
}
input{
float:left;
}
If width for input and span if you want to it aligned.
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
Twitter Bootstrap Scaffolding section on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
<div class="span2 well">
Sidebar content
</div>
The Bootstrap docs have an additional style property show-grid that is used to display a background (boxes) on the span* (columns) inside of rows. The CSS looks like this:
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
Demo: http://www.bootply.com/68856
In my header div, I need to have 2 objects floating to the right, one is a button and the other is a search field.
Both of them is in a div called "pull-right" which just make them float right.
The objects are in these order (from the left to the right)
Searchbox
Button
However since both of them obviously float right, the first element in the code are going to win and take the spot on the right.
So I've placed the button before the searchbox, even though that the searchbox actually comes first. But it's still works.
Is it considered a sloppy way to do it?
Here's the HTML:
<div id="navbar">
<div id="navbar-inner" class="clearfix">
<div class="pull-right">
Sign in
</div>
<div class="pull-right">
<form><input type="search" id="search" placeholder="Search"></form>
</div>
</div>
</div>
and the CSS:
.pull-right {
float: right;
}
You could easily wrap this in another container, and float that one to the right.
HTML:
<div id="floatingContainer">
<input type="text" value="Input" />
<input type="submit" value="submit" />
</div>
CSS:
#floatingContainer { float:right; }
JSFiddle example.