I'm trying to float two elements (buttons) to the right of a flexible container.
One of the buttons is also flexible, as the text within it changes depending on who's logged into the system.
Any ideas how this can be achieved? Help is much appreciated! I've already tried float rights (the order of the buttons is wrong when I do that) and display: inline-block (doesn't work).
Edit:
Code I've tried (that doesn't work). This is psuedo version, as I'm currently overhauling a pre-existing system -
<div style="width: 100%">
<div style="float:right; text-align: right;">
<input type="submit" style="display: inline-block"></button>
<button style="display: inline-block"></button>
</div>
</div>
It works perfectly..please check your project code completely,
<div style="width: 100%">
<div style="float:right; text-align: right;">
<input type="submit" style="display: inline-block"/>
<button style="display: inline-block">flexible</button>
</div>
</div>
works perfectly here..
FIDDLE DEMO
Related
I'm making login page and wanted to put icon before select with prepend so it would indicate that you can change language here, when I added it, select width become wrong, it's a little too big on right side (like on screenshot below)
<div class="input-group">
<div class="input-group-prepend offset-2 offset-md-3">
<div class="input-group-text">
<i class="fas fa-globe-europe"></i>
</div>
</div>
<select class="form-control col-8 col-md-6" name="lang" onchange="this.form.submit();">
<optgroup label="Official Languages">
<option value="en" selected="">English (United States)</option>
<option value="pl">Polski (Polska)</option>
</optgroup>
<optgroup label="Community Translations (not checked by us)">
<option value="es">Español (España)</option>
</optgroup>
</select>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<span onclick="window.open(dir+'popup/unofficial-translations','popupUNOFFTRANSL','height=500,width=1000,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');" style="font-size: 1.8vh" class="text-muted"><abbr>Click here to learn more about unofficial translations</abbr></span>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<span style="font-size: 1.8vh" class="text-muted">Change of language will remove written login and password.</span>
</div>
</div>
</div>
</div>
Since you didn't show your code beside your rendered dropdown, I am going to guess your rest HTML structure.
The one problem I see from your code is you don't have .row when using .col-*. You need to wrap your columns with at least a row. Of course, outside of them you should have a .container.
Secondly you have a .container nested within your <select>, and then you do col-12 inside of it. Why? You can safely remove .row and .col-12 if you just want to create a row that takes up 100% width. Bootstrap <div> for example aready does that.
I assume you have a .container as the most-outter class. You shouldn't have another .container nested within another. You only need one container class per section.
After I clean up your code, your example runs fine:
demo: https://jsfiddle.net/davidliang2008/jk7es2c8/22/
Again, we had no idea how your HTML structure looks like, and since you don't show your code, this kind of answer is what you will get. Or even your OP will be marked as off topic, unclear, etc.
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
I know I am doing it all wrong. At the moment, I used Tables to format my screen. Bad, I know. I am looking at learning Twitter Bootstrap, but for a test site, I am just trying to move away from Tables and try use DIVs for layout.
At the moment, I am trying to make a page header that shows a title on the left, and a login box on the right.
<div>
<table style="width: 100%;">
<tr style="vertical-align: top">
<td style="text-align: left">
<h1>Basic Finance</h1>
</td>
<td style="text-align: right">#Html.Partial("_Login", new LoginModel())</td>
</tr>
</table>
<hr />
#RenderBody()
</div>
How can I use DIVs to do this? Are DIVs the right idea? I see Twitter Bootstrap uses <SPAN> - but I am days away from getting to grips with it.
So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.
DEMO
Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:
<div id="wrapper">
<h1 style="float:left;"> Example Text </h1>
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<input type='submit' name='submit' value='Register'>
</form>
</div>
Which is then accompanied by some CSS code:
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
span {
display: table-cell;
}
label {
display: table-row;
}
form{
float: right;
}
The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.
Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.
Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)
You can use divs and it's a good idea if you want to switch, you can use display properties according to your needs
<div style="width: 100%;">
<div style="vertical-align: top">
<div style="text-align: left;display:inline-block;">
<h1>Basic Finance</h1>
</div>
<div style="text-align: right;display:inline-block;">#Html.Partial("_Login", new LoginModel())</div>
</div>
</div>
And twitter-bootstrap have some classes like pull-left and pull-right have a look at it, i recommend you to use divs instead of tables!
Fiddle Demo
Try this layout
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Basic Finance</a>
<div class="pull-right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
</div>
You can use
display:table; for <table>
display:table-row; for <tr>
display:table-cell; for <td>
in div format
here is a demo (it has css table vs html table-compare and check for your understanding)
CSS to play with
body{
height:100%;
}
#main{
height:100%;
width:100%;
}
.table{
display:table;
width: 100%;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
With just plain divs you can use the float property to get them next to each other
<div>
<div class="table">
<div class="left">
<h1>Basic Finance</h1>
</div>
<div class="right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
#RenderBody()
</div>
Then you can style it the way you like with CSS, for instance:
.left{float: left;width: 50%;;height:100%;text-align:left;}
.right{height:100%; text-align:right;padding-top: 30px;}
.table{height: 75px;}
Output of this code:
http://jsfiddle.net/7Qv8r/1/
Cheers
You can try this
Check Fiddle here
<div>
<div style="width: 100%;">
<div style="float: left">
<h1>
Basic Finance</h1>
</div>
<div style="float: right; padding-top: 30px;">
#Html.Partial("_Login", new LoginModel())</div>
</div>
<div style="clear: both">
</div>
<hr />
#RenderBody()
</div>
Good Luck n Happy New Year...:)
I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing .form-inline. In one such instance I am also attempting to use .input-append with little luck.
<div class="row">
<div class="well span12">
<div class="row">
<div class="span12 form-inline input-append">
<label for="assetSearch">Asset Search</label>
<input type="search" id="assetSearch" placeholder="">
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
<div class="row">
<div class="span12 form-inline">
<label for="service">Service</label>
<input type="text" id="service" autocomplete="off" />
</div>
</div>
</div>
</div>
The above markup renders like this:
As you can see "Asset Search" is not inline with the form input. If i remove the .input-append class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.
How can I use .form-inline in cunjunction with .input-append?
You should not put inside a input-append (or prepend) anything else than inputs, buttons or .add-ons (this might not be exhaustive).
Try wrapping the whole thing into a div.input-append and let the .form-inline handle the floating : Demo on jsfiddle
<div class="span12 form-inline">
<label for="assetSearch">Asset Search</label>
<div class="input-append">
<input type="search" id="assetSearch" placeholder="" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
Here's a fiddle of working alignment: http://jsfiddle.net/Jeff_Meadows/xGRtL/
The two fixes are to set vertical-align of <label> elements inside elements of class .input-append, and to reset the font-size of your element to 14px (it's set to 0 somewhere else in bootstrap). Rather than create a rule based on .input-append, I created a new class that you can add to your containing element. That way, you won't get unexpected results elsewhere.
.input-prepend label, .input-append label {
vertical-align: middle;
}
.fix-text-spacing {
font-size: 14px;
}
I'm having some trouble centering my Bootstrap login form.
Centering
I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.
I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.
Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.
CODE:
http://jsbin.com/gamufagehu/edit?html
If you want to place the form in the center of the screen then use position: absolute and don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.
Also, you're use of input-group (Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-group instead.
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
#media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>
you can use
.input-group{
margin:0px auto;
}
here is a bin working fine with same rules.
the reason you input box has right-top and right-bottom radius but not the left-top and left-right is that it is excepting something on the left of it, like some button or something, let me throw a link to make it understand better. go to amount field on this link. we can always overwrite the bootstrap rules but it is not recommended when there is a problem with use of classes, good luck.
well well well, sorry for frequent edits, but check out the use of .input-group class, i guess you messed it up there
I would recommend using column layout in a proper way.
You could wrap your login elements in divs that are based on column layout grid with length 4 and offset equal 4 too. You would get elements centered on the page and fully responsible. Then you could style elements inside them as in normal form groups.
I'd also recommend not using input groups as they are designed to group inputs as the name suggests and this is the reason you have square corners on left side of the inputs (for other inputs on left to seamlessly integrate into one input group) :)
Just put every form row inside that structure:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="input-group">(...)</div>
</div>
</div>
Look here:
JSBin example
Good note for future use of any library, including bootstrap - it is a good way to read all examples of use of particular library and its documentation, because otherwise you could end up overwriting functionalities that are already provided within it :)
You can use this:
.input-group {
position: relative;
border-collapse: separate;
display: block;
}