Menu
I am using Bootstrap and I want add a button at right of a bar that looks like <input-group-addon>. To be specific, full height and locates at right most.
I've tried height: 100% but the button styles super high.
this is part of my code: https://plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview
this is what I m looking for 
861
If you want to move the button to the right, you can also place the button within a <div> element and add the text-align property with its "right" value to the "align-right" class of the <div>.
Add css style using adding the margin-left property referencing the button. The following code snippet can be a positive or negative number to shift the button left or right. Typically if you used the button solution, add the margin-left property as in the screen shot - or add the code below in a custom html block.
Try absolutely positioning your button:
.my-heading {
position: relative;
}
.btn.my-btn {
position:absolute;
right: 0;
top: 0;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading my-heading">Assist Panel<button class="my-btn btn"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
