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

Question

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!

I think you're going to have to add a `div` inside the `td` and apply the styles to that. Or perhaps look here: [How to hide Table Row Overflow?](http://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow) — steveax, Jun 26 '12 at 00:25

Sascha · Answer 1 · 2012-06-26T00:34:47.697

3

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.

edited Jun 26 '12 at 00:34

answered Jun 26 '12 at 00:28

Sascha

937
6
14

Thanks mate. I'll try this and hopefully that will fix it. Hopefully I am able to change it (it being created by a Telerik control)... – The Buke Jun 27 '12 at 05:58

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

1 Answers1