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.
Related
img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/
https://jsfiddle.net/wc3f1h0m/
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="btn-block">
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary" value="App Button One"
/>
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary"
value="App Button Two"
/>
</div>
</div>
</div>
I have two button underneath a form in a btn-block. While the form is wide enough, I would like the buttons side by side (stacked horizontally), and roughly centered under the form.
When the screen width shrinks, eventually the buttons will stack vertically (due to btn-block), but at this point I would like to align them left, rather than their initial center position.
Currently I am just offsetting them using another column, so I would like that left column to dissapear when they stack vertically, or some other way of achieving this. I was thinking of having another with a certain width but zero height, but when I tried that the div always stays to the left of the first button, it does not get stacked vertically alongside the others.
How can I center the buttons when they are stacked horizonally, but left align them when they switch vertically?
More generally, how can I apply rules based on this "switch" - do the elements get a different class when they switch to stacking vertically I can apply more rules on?
TIA
I don't know that you can make them automatically align left once they no longer fit side by side but you can if you define a particular media query break point for them to do that at. So because you've got a max-width on the buttons of 170px each, i've applied the media query to keep them left aligned up until 320px. Seems to hit the mark pretty well.
https://jsfiddle.net/wc3f1h0m/15/
key changes are:
1) get rid of the col-xs-1 div as the buttons are centered now anyway so its not doing anything.
2) adding a new class "btn-alignment" to the "btn-block" so that we can apply our own custom css to it.
.btn-block.btn-alignment {
text-align:left;
}
#media(min-width:320px) {
.btn-block.btn-alignment {
text-align:center;
}
}
Also changed your h5's to labels which is what you should use to define inputs on forms.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Or this inverse:
<div class="row">
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Is this the sort of thing you are looking for? Was kind of confused how the whole form was wrapped in a col-md-4 as to get the behaviour you were looking for. Hopefully one of these
'<style type="text/css">
/*Use the following code*/
#media(max-width:320px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
/*-----or---------*/
#media(max-width:480px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
</style>'
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/
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).
I have a search page that contains a textbox for the search and a link that says "advanced search" similar to google.
I am having trouble centering the textbox AND having 'Advanced Search' to the right of the textbox.
Basically I want the layout to look like googles http://www.google.com/'>See here
This was my shot:
<div style="width:650px; margin-right:auto; margin-left:auto;">
<%= Html.TextBox("SearchBar")%>
</div>
<div style="width:90px; float:right;">
Advanced Search
</div>
Google uses a table to display their search box. The left and right columns have widths of 25% and the center column has a width of 50%. The search box is in the center column and the "Advanced Search" is in the right column. The left column is empty.
Then just center the table. Your search box will be centered and "Advanced Search" will appear on the right.
You can try using a wrapper div with 90px on each side and auto margin that instead.
IE
<div class="wrapper">
<div class="side"></div>
<div class="textbox"><input type="text" id="myinput"></div>
<div class="side"></div>
</div>
Not being a CSS purist, I too would go the table route since I could do that in much less time than trying to get floated DIVs to line up correctly.
You could however use 3 DIVs floated left and sized appropriately to accomplish the same thing.
<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>
you can set style to the textbox if apply something like this:
style="position absolute;top:80px;left:90px;"
your are being explicit on where you want the textbox to be displayed so you specify the pixels and it should be inside a layer... it should work for you
input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">