bootstrap-rtl icon indicating copy to clipboard operation
bootstrap-rtl copied to clipboard

Multiple buttons in button group - border is nor right

Open elyashiv opened this issue 9 years ago • 0 comments

I have the following html code, along with bootstrap, bootstrap-theme and bootstrap-rtl css files:

<div class="input-group">
    <input class="form-control" name="book_place" required="" pattern="seat_.{3}" value="seat_076" type="text">
    <div class="input-group-btn">
        <button class="btn btn-default">שלום</button>
        <a href="/choose/seat" class="btn btn-default">בחר</a>
    </div>
</div>

This results the following:

screen shot 2015-10-08 at 20 01 13 as you can see, the right edge of the button are round, though they are suppose to be square - as you can see here.

I think this is achieved with the following rule (from line 3971 in bootstrap.css):

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Though, I'm not 100% sure.

elyashiv avatar Oct 08 '15 18:10 elyashiv