I am working on a bootstrap 3 project at the moment and i have added a button called "Add Shipment, i want this button to stay fixed to the right hand side of the panel but when I give it the style of float:right or class of pull-right, it doesn't work.
The design must be responsive so therefore I cannot just give it a class of float: left and then put margin-left: XXX
Please let me know if you know how to solve this, the code and screenshot are below.
<div class="row" style="margin-top:-20px;">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-primary panel-table" style="border-radius:50px">
<div class="panel-heading" style="background-color:#EFEFEF; border: 1px solid #CCCCCC; height:45px; width:auto">
<div class="panel-title" style="padding:0; width:auto" >
<div class="input-group input-group-sm" style="width:200px; margin-top:7px; margin-left:10px; float:left">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" placeholder="Filter">
</div>
<div class="btn-group" style="float:left; margin-left:25px; margin-top:6px">
<button type="button" class="btn btn-default">All</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-road"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<button class="btn btn-info" style="margin-top:6px; float:right">Add Shipment</button>
</div>
</div>
<div class="panel-body" style="background-color:#F2F2F2; border: 1px solid #CCCCCC; height:200px">
</div>
</div>
</div>
Current screenshot of results from that code:
I tried copying and pasting your code to see how things look, and it looks fine. I see that the Add Shipment button is pulled to the right. You must have something in your CSS stylesheet that is preventing the button from being floated to the right
Related
I have the following code here:
<div class="container-fluid">
<div class="row-fluid">
<div class="centering col-lg-8 topSection" style="text-align: center;">
<div class="col-lg-12" style="padding-top: 160px;">
<h2 style="color: #fff; font-size: 30px;">Get discovered - Discover - Connect</h2>
<h3 style="color: #fff; font-size: 23px;">We love everyting about music. The scene. The people. The livestyle. We live for it.</h3>
<button type="submit" class="btn_style_1 btn" data-toggle="modal" data-target="#myModalLogin">Sign in</button>
<button type="submit" class="btn_style_1 btn" data-toggle="modal" data-target="#myModal">Join now</button>
</div>
</div>
</div>
</div>
When I run the application, the buttons are not working. Nothing happens when I click on the buttons. The cursor Is not transformed to a pointer when I hover the buttons.
However, when I remove centering col-lg-8 topSection, the Sign in button works, but not the other button.
Have anyone had the same problem?
EDIT:
I had this In my Layout.cshtml:
<div class="col-lg-12">
#RenderBody()
</div>
When I removed the div, It worked.
Remove the type="submit" or replace it with type="button". Your solution would be:
<button type="button" class="btn_style_1 btn" data-toggle="modal" data-target="#myModalLogin">Sign in</button>
<button type="button" class="btn_style_1 btn" data-toggle="modal" data-target="#myModal">Join now</button>
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
I have a question regarding the vertical alignment of a button group within a row, using bootstrap.
This is an image that explains what I'm trying to achieve
And the following code is used in my current project:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
<div class="row">
<div class="col-sm-9">
#if (item.Completed) {
<h4><span class="label label-success">Completed</span> #item.Procedure.Title</h4>
} else {
<h4><span class="label label-danger">Not completed</span> #item.Procedure.Title</h4>
}
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Time required:</dt>
<dd>#item.Procedure.Time</dd>
<dt>Material required:</dt>
<dd>#item.Procedure.Material</dd>
<dt>Engineers required:</dt>
<dd>#item.Procedure.Engineers</dd>
<dt>Documentation:</dt>
<dd>#item.Procedure.Documents</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Status:</dt>
<dd>#item.Status</dd>
<dt>Note:</dt>
<dd>#item.Note</dd>
</dl>
</div>
</div>
</div>
<div class="col-sm-3" style="vertical-align: middle;">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success" role="group">
<span class="glyphicon glyphicon-ok"></span>
OK
</button>
<button type="button" class="btn btn-danger" role="group">
<span class="glyphicon glyphicon-remove"></span>
Not OK
</button>
<button type="button" class="btn btn-info" role="group" data-toggle="modal" data-target="#noteModal#(item.ID)">
<span class="glyphicon glyphicon-pencil"></span>
Add note
</button>
</div>
<div id="noteModal#(item.ID)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label for="note">Note:</label>
<textarea class="form-control" rows="5" id="note" style="min-width: 100%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add note</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Any help apreciated, thanks!
I solved the problem using the flex property on the outer .row
.row-flex {
display: flex;
align-items: center;
}
Image
This is what I did:
.btn-group {
flex-wrap: wrap;
width: 80px;
}
button{
width:80px;
}
Here is the JSFiddle demo
I have a question that has been surely asked 10000 times already but I don't really understand the answers.
I want to make something simple : divide my screen in 3 columns, add some buttons on the 1 column, a google map in the second one and other buttons in the 3rd one.
How can I manage to do that properly?
For moment I added the buttons where I wanted, but when it comes to manage the map, I have problems usually with the size.
<div class="container">
<div class="row">
<div class="col-lg-4">
<button type="button" class="btn btn-primary btn-lg">1</button>
<button type="button" class="btn btn-default btn-lg">2</button>
</div>
<div class="col-lg-4">
<div id="map-container" style="width: 500px; height: 300px;"></div>
</div>
<div class="col-lg-4">
<form class>
<b>Point A : <input type="text" class="form-control"></b>
<b>Point B : <input type="text" class="form-control"><b>
<button>Validate</button>
</form>
</div>
</div>
<div class="row">
<br></br>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="button" class="btn btn-success sharp">Good</button>
<button type="button" class="btn btn-warning sharp">Normal</button>
<button type="button" class="btn btn-danger sharp">Bad</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
You should set the map height style, but not the width. Also you should set:
#map-container img {
max-width: none;
}
See this question on stackoverflow for more information.
I have two element in my HTML code. One, is a text:"Machine" and the other is a button which need to be in the right panel (but in the sane line..).
<div class="panel panel-default">
<div class="panel-heading" style="align: center"> <strong class="">Machine</strong>
<div ng-show="app[11]">
<button style="float: right;" class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
For some reason, the button appear beneath the text, and not beside it.
What can be the reason?
Edit:
I change it to the next code, after the answer suggestion:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
It's still gives me the same result:
I close the first <div> later.
you didn't close your first div.
<div class="panel panel-default">
<div class="panel-heading" style="align: center; float:right;">
<strong class="">Machine</strong>
</div>
<div style="float:right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
and now you can change line-height of the text div to have a better position beside your button.
Don't float anything. dive both divs inside panel-default display:inline-block; vertical-align:middle; and it will center them on the same horizontal line.
.panel-default{
> *{ display:inline-block; vertical-align:middle; }
}
You could put the <button> along with its surrounding <div> inside the <div class="panel-heading"> and move the float property from <button> to <div>, like so:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
</div>
http://jsfiddle.net/n6tp90s7/
Your code was missing one closing </div>, so I am not sure if that was your intention from the start.
<div id="box">Machine<div id="button">delete</div></div>
and css:
#box {width:200px; height:40px; line-height:40px; padding-left:5px;}
#button {width:70px; height:36px; float:right; margin:2px 5px; background:#ff0000;}
with this, you'll get the result you want. And you can add the codes you didn't write...