input button occupying 100% in bootstrap div - html

Input button occupying 100% in bootstrap div. I want see button and <a> next to each other. I don't know what's wrong here.
<div class="col-xs-12 col-sm-6 col-md-5">
<input type="submit" value="Save" class="btn btn-success " onclick="javascript: submitPhone();">
<a class="linkbutton linkbutton" onclick="PostEditPhoneCancel()"> Cancel </a>
</div>

You can try and set the 'a' tag class as a button, instead of a link it already is.

This is probably happened because the elements have display: block applied.
There's a couple of solutions you can use. One would be to use floats so apply float:left to both the button and the anchor.
Another way of achieving this is to add display: inline-block to both of the elements.

Related

Placing two divs on the same line with 'inline' not working

I have several buttons contained within divs that I would like to place on the same line. Two of the buttons are only displayed if a certain value is greater than 0. I added display:inline-block in a div container thinking that would place all of the enclosed divs on the same line but it didn't. I also need the buttons to float right (hence the style="float:right in the container div. I've also tried placing display=inline on each of the buttons which didn't work. Here is my HTML:
<div style="display:inline-block" style="float: right;">
<div *ngIf="menu.itemNumber > 0">
<button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
<button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
</div>
<button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button>
</div>
Why aren't the buttons showing up on the same line?
Its because you have a div inside which is block by default. Apply display:inline-block to all elements inside parent button div
Stack Snippet
.main>* {
display: inline-block;
}
<div class="main">
<div>
<button></button>
<button></button>
</div>
<button></button>
</div>
Your inner div (<div *ngIf="menu.itemNumber > 0">) is still a block level element. You need to give it display: inline-block, for it to be inline with the following button.
Also, do not duplicate the style property on your wrapper div. Combine the styles in one string: style="display:inline-block; float: right;" (this is assuming you still want the outer div to be inline-block - it may not need to be).
I also learned that sometimes, depending on the size of the content inside your buttons, or sibling elements, they might not be in the same baseline, meaning some will be higher than others, even if they are side by side. The way to fix baseline issues is to use a special kind of overflow (Like hidden or auto) on the sibling elements
EXAMPLE:
div sibling-elements{
overflow: hidden;
}

Bootstrap pull-right only working at small width

I'm using Bootstrap to get some text and a button to appear on the same line on opposite sides of the screen. I'm using pull-right to bring the button to the right side of the screen, but it only works when the screen width is narrow. If I make it wider, the button moves next to the text. Here's a JSFiddle example and the relevant code:
<body>
<div class='container-fluid'>
<form class="form-inline">
<div class="form-group ">
<label>Some Text</label>
<button type="button" class="btn btn-primary pull-right">Some Button</button>
</div>
</form>
<div><p>The button only appears on the right side of the window when the width is fairly narrow, even though it has the Bootstrap 'pull-right' class.</p></div>
</div>
</body>
Is there a way to get the button to the right at all widths? Apologies, I'm not great with Bootstrap and CSS, so I'm sure this is an easy thing that I'm missing. Also, for what it's worth, this is for an Electron app, so it only needs to work in Chrome.
Thanks.
That's because it's wrapped in a form group div, which is only the full width on smaller viewports. You could get rid of the form group and just make the div width:100% in css.

Bootstrap floating drops item onto second line

This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.

input width and button width with bootstrap

I have a form with an input and a button, styled with bootstrap.
I am using grid colums to give the input and the button their own width.
But it seems to change the input's width, I have to assign the col-* class to the div surrounding the input, whereas the button can receive the class on itself.
This ends up with the input not using the width I was hoping to give it.
<div class="container">
<div class="row">
<form name="search" role="search">
<div class="form-group col-sm-10 col-xs-12">
<input type="text" class="form-control input-lg" placeholder="Hey"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
Search
</button>
</div>
</form>
</div>
</div>
Here is a jsfiddle where I added a line on the page as a reference to show up to where the input should go on the left. As you make the fiddle window smaller, the button goes under the input and reaches a full lenght, but the input still has a gap on both sides.
It is because the column classes are meant to wrap the elements and give them structure. If you give your button those classes, it will give that element the full width instead of the typical padding.
I moved the column classes onto the form-group instead and made a simple class called .btn-full that sets the width: 100%; and it achieves what you want.
http://jsfiddle.net/SXus5/
If you want the button to be the full width of the container, just add the class 'btn-block' to it. Any inputs inside of a form group will automatically expand to fill their container. Instead of adding the .col classes to the form group, add it to a div the form is contained in.
Here's a modified version of your jsfiddle with the input, button and line all the same width.
<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>

bootstrap 3 button group in panel-header not centering

I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
here's the HTML:
<div class="panel panel-default">
<div class="panel-heading">
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
<div class="panel-body">
test
</div>
<div class="panel-footer">
test
</div>
</div>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.
You should add the class pull-right to your .btn-group div, instead of specifying float:right.
When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/
You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.
add
.container{
line-height:2.2;
}
along with what David has suggested above to have the text truly in the center vertically.
check fiddle
I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
.panel-heading {
overflow: hidden;
}
and using:
<div class="pull-right">
here you are the example: Jsfiddle example
You can use a trick for that ;)
...
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
<div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
...
Good luck - S.M. Mousavi
I solved this issue for myself today. All of the seemingly-working suggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
If you look at #ithcy's answer, and jack up the font-size, you have a problem (demo).
The more googling I did, the more I became convinced that CSS's vertical-align was what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaris that better explained what vertical-align is,
The vertical-align property can be broken down into three
easy-to-understand steps:
It only applies to inline or inline-block elements
It affects the
alignment of the element itself, not its contents (except when applied
to table cells)
When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
and more importantly is not:
The common misconception about vertical-align is that, when it’s
applied to an element, it will make all the elements inside that
element change their vertical position.
My solution was to use CSS table formatting (which is what vertical-align is for, after all) instead of the floats that Bootstrap provides with pull-left and pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
HTML
<div class="panel-heading table-style">
<span class="panel-title">Member of...</span>
<div class="button-wrap">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
</div>
CSS
.panel-heading.table-style {
display: table;
width: 100%;
}
.panel-heading.table-style .panel-title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.panel-heading.table-style .button-wrap {
display: table-cell;
vertical-align: middle;
text-align: right;
}
I made a demo of the way I'm using it, which I'm sure can be improved on.
I am very aware that the btn-group has a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.
It's very late, but I simply solve by this css:
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}