The Buke
The Buke

Reputation: 21

Can someone help me restrict the height of CSS class and add a scrollbar?

Sounds easy I know. I told the client it would be done in 5 minutes... 4 hours later it is just getting annoying...

This is the current structure:

<div class="RadWindow">
    <table class="rwTable">
        <tr class="rwContentRow">
            <td class="helpDialog"> Content to be cut off and wrapped</td>
        </tr>
    </table>
</div>

There is actually a few more styles etc in the div, but these are the ways that I should be able to control it. I have tried setting a height, max-height and overflow on the class .helpDialog, but nothing happens.

I then tried it on the <td>:

td.helpDialog

I then tried stipulating the entire path in a verbose manner:

.RadWindow table td.helpDialog

It is just not working for me. Any help would be GREATLY appreciated!

Upvotes: 2

Views: 259

Answers (1)

Sascha
Sascha

Reputation: 957

use an extra div container to control the layout.

html:

<div class="RadWindow">
    <table class="rwTable">
        <tr class="rwContentRow">
            <td><div class="helpDialog">Content to be cut off and wrapped</div></td>
        </tr>
    </table>
</div>

css:

.helpDialog{
    height: 50px;
    width: 50px;
    overflow: hidden;
}

By the way, do not over qualify css selectors. This will slow down your page rendering especial on large dom trees and/or dynamic sites.

Upvotes: 3

Related Questions