CODEWITHSUNDEEP
csstwitter-bootstrap
Indy
Indy

Reputation: 4957

Display table/table-cell - align one cell to the right

So, here's my code: http://jsfiddle.net/8xpL78ow/ and I have a few issues I don't know exactly how to solve:

a) I want the buttons to be aligned to the right side and always stay in one line (don't collapse under other button like in 'very long folder name' example ). If a use float: right on .btn-group div, it's ok, but here's my second point:

b) I want to text fill all of remaining horizontal space.

Any help would be appreciated. Thank you.

Upvotes: 2

Views: 5130

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

I would try something like this.

#folder-panel .btn-group {
    text-align: right;
    white-space: nowrap;
    padding-left: 5px;
}
#folder-panel .btn {
    float: none;
}

See demo: http://jsfiddle.net/audetwebdesign/xe208rxs/

Since you are using Bootstrap, you need to make sure that your CSS rules are specific enough to take effect.

I added an ID to your .container block, and then modified the .btn rules to set float: none. This means the buttons will now be inline elements.

If you do not want to use and ID, then you will have to make sure that you duplicate the selectors in Bootstrap to override the CSS rules that you need to alter.

Set text-align: right to .btn-group and the buttons will align to the right. Finally, set white-space: nowrap and this will prevent the icons from wrapping.

Note: You could try setting a min-width value, but that is less flexible.

Upvotes: 5

Rajesh.S
Rajesh.S

Reputation: 61

Try to use pull-right option for your button group by this way they will float right. And also use grid section if needed to seperate the buttons and text content.

 <div class="container">

    <div class="list-group folders-list">
        <a class="list-group-item active" href="#">
            Folder 1
        </a>
        <a class="list-group-item table" href="#">
            <div class="col-md-5">
                <span class="folder-name table-cell">Very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long folder name</span></div>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 3</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 4</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 5</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
    </div>

</div> <!-- /container -->

Upvotes: 1

Related Questions