I have this html code which I use with Bootstrap:
<div class="text-center offset-top-20">
<input id="update" class="btn btn-primary" type="submit" value="Update" />
<input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />
</div>
Demo: https://jsfiddle.net/02jmwd85/1/
When I resize the web page and reduce the width the buttons are moved and the second goes below the first. Is there some way to to keep their position and keep them horizontally?
The responsive design feature of Bootstrap allows the UI elements to automatically stack up one below the other on narrow screens.
This is a desirable feature in many scenarios.
This functionality can be overridden by custom style specified at the component level.
In the current scenario, the custom style can be applied to the <div> that encloses the two buttons - Update and Cancel to prevent those from stacking up.
This can be done by specifying a minimum width for the enclosing div.
Here is an example:
<div class="text-center offset-top-20" style="min-width: 500px">
<input id="update" class="btn btn-primary" type="submit" value="Update" />
<input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />
</div>
How does the above solution prevent the buttons from stacking up?
The custom style attribute - style="min-width: 500px;" makes sure that the enclosing div cannot become narrower than 500 pixels.
The 500 pixels of width will give enough room for both the buttons to stay side by side.
This will in turn prevent the buttons from stacking up.
Related
I have a button called Delete next to a link inside a DIV per list item. To confirm I have another button that should appear next to called Confirm Delete. When that is clicked it is posted back to server. The Delete appears correctly but the confirm drops down to the next line instead of appearing on the same line.
Source:
<ul>
<li>
<div style="font-size: x-large;">
<a href="/item/detail/123>Rearden Steel</a>
</div>
<button type="button" name="delete" value="Delete" onclick="ShowDeleteButton('Delete123', this);" class="btn btn-default btn-primary disableOnClickSubmit">Delete</button>
<span id="Delete123" style="display: none;">
<form action="/item/ItemDelete" method="post">
<input id="id" name="id" type="hidden" value="123" />
<button type="submit" name="deleteConfirm" value="DeleteConfirm" class="btn btn-default disableOnClickSubmit">Confirm Delete</button>
</form>
</span>
</li>
<li> ... </li>
<ul>
What style do I need to apply to have the confirm Delete button appear on the same line as the link and Delete button?
I'm using Bootstrap 3.
Bootply Example: http://www.bootply.com/VsU984gbLs
You just need to do either of these to make <li> come in the same line.
display: inline-block: You should ensure you have no space character between <li>s.
float: left: You should ensure to clear the floats.
Remember the caveats above. Since you are using Bootstrap, you may use the utility class: pull-left or pull-right. The best thing is to make sure the pattern you want is already present in the framework and use the mark-up instead of creating your own styles.
In the Bootstrap Jumbotron example, the username, password and sign in button are spaced without the aid of JavaScript (I disabled JS in both and refreshed), margin, padding, etc. How are these elements spaced? div.form-group specifically is a mystery to me. I have tried to mimic the code myself. I'm using Bootstrap's CSS and JS. In my HTML I have no space between the the three elements. After disabling JS, and trying various styles I cannot explain how the spacing in the Bootstrap Jumbotron example is achieved. Besides the difference in spacing my elements have a slightly different size. My password input is 160px wide with 12px of padding and 1px of border, while the proper Jumbotron example is 170px wide. Both computed widths are auto. How can I get spacing between email, password, and the sign in button like in the Bootstrap example cited?
There is a similar but different question, of how to get it to work differently than in the example by Bootstrap.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="email" class="form-control"></div>
<div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
<button type="success" class="btn btn-success">Sign In</button>
</form>
Here is the whole page:
<!DOCTYPE html><html><head><title>Foodle Bardle</title><link rel="stylesheet" href="/stylesheets/bootstrap.css"><link rel="stylesheet" href="/stylesheets/bootstrap-theme.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/bootstrap.min.js"></script></head><body><nav class="navbar navbar-inverse navbar-fixed-bar" aria-expanded="false" aria-controls="navbar" data-toggle="collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Foodle Bardle</div><div id="navbar" aria-expanded="true" class="navbar-collapse collapse in"><form class="navbar-form navbar-right"><div class="form-group"><input type="text" placeholder="email" class="form-control"></div><div class="form-group"><input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">Sign In</button></form></div></div></nav><div class="jumbotron"><div class="container"><h1>Sample</h1><p>Welcome to Sample. Lots of sites and apps offer a foo. Some even add a bit of the bar (foobar fooy and doey) way to bar up. Here is a place to nuture your bardle using all the tools available. </p></div></div><div class="container"><div class="row"><div class="col-md-4"><h2>Foo Integration</h2><p>Foo work is demanding, and solving complex bars all day will actually make productivity smurf, but there are ways to maximize hoey bar over time. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>GTD - Getting Bardle Done</h2><p>David Barish gave us some insights that can help us keep our foodle focused on what matters at the moment. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>SRS - Spaced foobardle Software</h2><p>One of psychology's best kept secrets, SFS is a way to overcome much of the innefiency in learning. All people forget and learn in some predictable ways, SFS puts the computer to task, scheduling well structed foodle bars or bardle foos for review at the ideal moment. </p><a class="btn btn-primary btn-lg">Learn More </a></div></div></div></body></html>
Logic behind it:- The elements on the Bootstrap Jumbotron link are made to display as inline-blocksand Inline blocks tend to behave as "words" in a sentence, and as words have spaces between them to differentiate them from each other (delimiter), likewise HTML Renderers also adds a space between the elements with the attribute of display:inline-block;
The problem:- Your elements are being treated as such because they have a (hidden) space (in the form of new-line) between them.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="email" class="form-control"></div>
<div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
<button type="success" class="btn btn-success">Sign In</button>
</form>
Solution:- So to avoid this type of behavior, you shall have to write them as such that they don't have a space(or a new-line) between them.
A. You could just write the whole concerning elements' HTML in one line.
B. Write the HTML as below.
<form class="navbar-form navbar-right"><div class="form-group">
<input type="text" placeholder="email" class="form-control"></div><div class="form-group">
<input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">
Sign In</button>
</form>
CodePen Demo!
Note:- Now that i reread your question I have a better understanding of your requirements, and If I'm not wrong, you want the opposite to happen. So for your solution,
Make sure that the elements have the display attribute set to inline-block.
Also make sure that the elements are not inheriting the property of float:left (or right), and if it is, then you can stop the float as shown here.
Basically, I am coding a simple page and on desktop, it all aligns just fine. When switched over to mobile it appears very differently. I will include screenshots to show what I mean. I have tested this on Nexus 5, iPhone 6, iPad Air and two different desktop monitors (21in + 17in).
How would I go about fixing this exactly? I am not very advanced in bootstrap but I couldn't find anything in the documentation about mobile.
Also, the alignment of things and their position changes based on size of monitor. Even if I zoom out it will change the position of things and make it look weird.
I guess what I'm wondering is how to make this page more repsonsive!
Here is the code for the section:
<div class="well" style="height:12%;width:75%;">
<div class="col-md-10">
Testing12332<br /><br /><a class="link" href="view.php?id=27"><b>Testingthis</b> - 0 seconds</a>
</div>
<div class="col-md-2">
<form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">
<button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">▲</button><br />
<input type="hidden" name="id" value="27">
</form>
<div class="well" style="padding:0px;margin-bottom:0px;">
0
</div>
<form action="dislike.php?id=27" method="POST">
<button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">▼</button><br />
<input type="hidden" name="id" value="27">
</form>
</div>
</div>
Let me know if more information is needed! I tried to provide as much as possible! Also, yes, I am using Bootswatch (Flatly) if that makes a difference.
Edit: All of the code is here --> http://pastebin.com/AvYEkDNN
Sorry for the format being messed up, a lot of it is output with PHP and messed up the format in each loop.
Here's a link to your complete HTML. http://pastebin.com/ZCvDzz3b The only other thing you need to do is create an external stylesheet if you don't already have one called style.css and then add this code at the bottom of this sheet. Make sure your style.css is placed in the same location as your index file.
#media (min-width:768px) {
.well {width:75%!important;
height:22%!important;
}
}
OK, I have found the issue thank you to your comment
First of all, do NOT use inline styling. It usually means problems and quite rarely a solution.
With that in mind, get rid of this:
<form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">
and replace it by
<form action="like.php?id=27" method="POST" class="my-custom-form">
this will allow you to re-use that style every time.
Now you can do something like this by simply adding some EXTERNAL CSS:
.my-custom-form{margin-bottom:0px;margin-top:-8%;}
/** add some styling for small devices **/
#media handheld, only screen and (max-width: 767px) {
.my-custom-form{margin-bottom:0px;margin-top:1% /* or whatever, just not a negative value */;}
}
and it will fix your issue
EDIT:
Besides the above, clean your code like this:
<div class="well row-fluid">
<div class="col-md-10">testingthis
<br />
<br /><a class="link" href="view.php?id=28"><b>Anonymous</b> - 27 minutes ago</a>
</div>
<div class="col-md-2">
<form action="like.php?id=28" method="POST" class="my-form">
<button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">▲</button>
<br />
<input type="hidden" name="id" value="28" />
</form>
<div class="number">-1</div>
<form action="dislike.php?id=28" method="POST">
<button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">▼</button>
<br />
<input type="hidden" name="id" value="28" />
</form>
</div>
<div class="clear clearfix"></div>
</div>
and also get rid of your element. With all these changes (plus any additional visual adjustment you may need), it will work on all sizes
Sort of a weird problem. I'm following this section exactly but having a little trouble. When the button is aligned to the left of the field they align perfectly but when the button is aligned to the right (which I think of as more natural for a "submit" type behavior) there is about 5-10px of padding on top of the button that I can't get rid of:
My code is below:
<div class="col-sm-7">
<h3>Get the latest Amazon News first:</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-btn">
<button class="btn btn-default btn-group" type="submit">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
<h3>Get Started Now:</h3>
<a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>
I'm pretty confused why it would work on one side and not the other. Any help would be appreciated!
Something seems to be wrong if you have written any of your custom css. I just copied your html and created a pen using bootstrap cdn css hosted files. Check this pen/demo.
It's because somehow you are adding break tag i.e. above and below of your button element. just remove those breaks.
I'm trying to accomplish something that should be rather basic in CSS but I'm running in circles.
I have three divs in one fluid-width div. The two on the right have undefined width and should take up 100% of their allowed space. The full div already is fluid. And the far right div should have a width of 200px and that is fixed. Sort of like this:
[ [fluid(label)] [fluid(textbox)] [fixed=200(div)] ]
I'm trying to find a way to do this in CSS.
Thanks in advance...
edit:
Here's the html
<footer>
<form method="POST" action="/" id="input">
<label for="message" form="input" class="username">Will:</label>
<textarea id="message" cols="0" rows="0" autofocus form="input" wrap="hard" name="message"></textarea>
<div id="buttons">
<button type="submit" form="input" class="button medium" name="send" value="Send">Send
</button>
<button type="button" form="input" class="button medium" name="extras" value="Extras"><span>Extras</span><span>^</span>
</button>
</div>
</form>
</footer>
you could try using display:table-cell - but you'll need an extra div around the textarea:
http://jsfiddle.net/tU6w2/
(though i should add this won't work in IE7 - it doesn't support table-cell)
EDIT
in answer to the additional comments, another try - this time with jQuery - i don't think it can be done in CSS only:
http://jsfiddle.net/tU6w2/1/