CODEWITHSUNDEEP
htmlcss
Bob
Bob

Reputation: 1524

How do I wrap several buttons inside a TD element

I'm trying to alter this collection of buttons to wrap at the right edge of the screen. Currently they do not respect the right border of the screen and they just continue off the edge (well they aren't visible anyway). How do I force these buttons to automatically wrap to a new line within the table? The screen is re-sizable so I can't just set them statically.

Thanks.

<td>    
<table class="clsActionTable">
    <tr>
        <td style="text-align:center;">
            <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
            <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
            <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
            <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
        </td>
    </tr>
</table>

and the CSS...

.clsActionTable
{
    width: 100%;
    color: white;
    font-size: smaller;
}

.clsActionButton
{
    width: 128px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
width:100%;
background-color: #4E5A81;
color: White;
}

Upvotes: 4

Views: 24588

Answers (3)

tw16
tw16

Reputation: 29575

The reason you are not seeing it wrap in IE9 is because your original code http://jsfiddle.net/VdBGe/ automatically drops into compatibility mode. If you un-check it and put it back to standards mode you will see it wrap. It wraps for IE8+9 but not IE7.

To make it wrap in IE7 using your original code, you need to wrap the buttons in a div and set width:100%. Live Example: http://jsfiddle.net/VdBGe/1/

HTML:

<td style="text-align:center;">
    <div id="btnwrap">
        <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
        <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
        <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
        <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
    </div>
</td>

CSS:

#btnwrap{
    width: 100%;
}

Upvotes: 2

Orson
Orson

Reputation: 15441

    <table class="clsActionTable">
        <tr>
            <td style="text-align:center;">
                <button class="clsActionButton moveright" id="idAddButton" onclick="idAddButton_onclick();">Add</button>

                <button class="clsActionButton moveright" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>

                <button class="clsActionButton moveright" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>

                <button class="clsActionButton moveright" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>

            </td>
        </tr>
    </table>

and the css

.moveright {
    float: right;
}


.clearfix:after {
   content:"\0020";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   overflow:hidden;
}
.clearfix{display:block;}

Upvotes: 1

gutierrezalex
gutierrezalex

Reputation: 828

Assuming these buttons are floating & display block. I recommend the following.

  1. you remove text-align:center from the <td>
  2. remove both float and display: block from the buttons(If they have these properties)
  3. To align them right, just give the text align-right

Hope this makes sense

Upvotes: 0

Related Questions