CODEWITHSUNDEEP
htmlcsstwitter-bootstrapuser-interface
Seagull
Seagull

Reputation: 1133

Position input elements on the right of page

I have some difficulties positioning two elements on the right side of the page. Strangely the suggested answers of similar questions did not work at all or gave poor results, but most of them were correct if I used simpler elements like text-fields for example.

The view is: Image of a Filter text box Here's what I have:

input, select, textarea {
  max-width: 280px;
  text-size-adjust: auto;
}
<div class="input-group">
  <span class="input-group-addon">Filter</span>
  <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>

I have tried to adjust the position with float: right and by using the bootstrap grid system.

Upvotes: 2

Views: 1085

Answers (2)

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

<div class="input-group">
        <span class="input-group-addon">Filter</span>
        <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
    </div>

DEMO

or

.input-group-addon {
    min-width:100px;
    text-align:left;
}

DEMO HERE

Upvotes: 1

Chris
Chris

Reputation: 59511

I assume you have somehow set your input-group to have a fixed width, instead of the default 100%. Otherwise it doesn't make sense to talk about positioning.

In any event, bootstrap has a pull-right class you can use in order to float elements to the right. Just add it to your first div.

.input-group {
  width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group pull-right">
  <span class="input-group-addon">Filter</span>
  <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>

Have a read about this on the official docs, here

Upvotes: 1

Related Questions