Overriding Custom Controls' CSS styling

Question

I have a table that is custom created and have it styled in the .ascx, through CSS. See below:

<style>

.divTable {
    display: block;
    height: auto;
    width: calc(100% - 25%);
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    overflow: hidden;
    text-align: left;
    }

.divBody {
    position: relative;
    height: calc(100% - 42px);
    border: 2px solid #000000;
    font-size: 12px;
    font-weight: normal;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow-x: scroll;
    overflow-y: scroll;
    color: #383838;
    width: auto;
    height: 500px; -- this is the one I am trying to get to be the custom height; either 500px if on a view tab or auto if on another tab.
    }
....
</style>

Now, this is in a custom control called DataGridForDetails. When I bring this in to a 'VIEW' page, then it lists things perfectly, looks great. However, I have a 'DETAILS' sheet that has this control being re-used for other data that may or may not have as many items in the table (i.e the user clicks on a row in the view, takes them to the details page that has 2 of these datagrids that display asset costs and timesheet costs).

I want to be able to re-use this datagrid so that it 'can' be 500px height on the view tabs, however, to be auto height when it's on the other pages.

Is there any way of doing this? I've tried using !important, .style1.style2. Everything short of creating a new control purely for the other pages (maybe this is what needs to be done?).

Cheers.

Answer 1

One suggestion

1. design your user control as u like with divs and tables
2. create a seperate css file for view tabs
3. create a different css file for other pages

and use id selection in css. That is use #div , #Table etc. So it will affect all divs on that page.

Apply css carefully on to respective pages.

I am not sure it's the best way.

Answer 2

So rather than creating a separate CSS style sheet, I modified the original CSS styling and class names, then in the code behind, depending on whether it is a 'VIEW' tab or other tab, I run an if else statement and assign the corresponding class to the grid.

It may not be pretty, but it works.

Hope this helps.

Cheers.

If Request.RawUrl.Contains("VIEW") Then
        sb.AppendLine("<div class='divBodyView' id='" & TableName & "'>")
    Else
        sb.AppendLine("<div class='divBodyOther' id='" & TableName & "'>")
End If

.divBodyView {
position: relative;
border: 2px solid #000000;
font-size: 12px;
font-weight: normal;
top: 0px;
left: 0px;
right: 0px;
overflow-x: scroll;
overflow-y: scroll;
color: #383838;
width: 100%;
height: 100%;
}

.divBodyOther {
position: relative;
border: 2px solid #000000;
font-size: 12px;
font-weight: normal;
top: 0px;
left: 0px;
right: 0px;
overflow-x: scroll;
overflow-y: scroll;
color: #383838;
width: 100%;
height: 100%;
}