override CSS for contentbody_div

[alan]

Bruce,

I have a NetWebForm on which I need to override the height on the contentbody_div.  I don't see anyplace on the CSS Classes tab to do this.

Is there a way to override the contentbody_div settings for one specific procedure?

Thanks

[Bruce]

Hi Alan,

You're a bit thin on details, but I'll assume a few things. Firstly I'm guessing the form is not a popup - it's a content body (well duh ).

You mention limiting the height of the content body, but I think you're wanting to limit the height of the form itself, maybe have the content of the form scrollable from everything else?

first some back-story - the content-body doesn't have a height. It's just a container which will grow to accommodate whatever is inside it. So if you want to limit the size of the form, it's best to start with the form itself.

Are you familiar with creating a custom.css file for your app? I hope so (if not, let me know, and I'll point you at resources for that.)
So what you want to do is create a class there, say

.form-1{
 max-height: 250px;
 overflow: scroll;
}

then you can apply this style to the form itself, not to the content-body.

Cheers
Bruce

 

[alan]

Thanks for the reply Bruce.

I had earlier questions about popups and scrolling the contents within a page.  But this time, it's a standard  NetWebForm being called from the top level of my menu.  I have a lot of xhtml embeded in the xHtml Tab. (this is the same stuff I asked how to scroll in an earlier question -  but not trying to scroll it here).  The xHtml location is "After heading".  Then, on the form I have a browse for view only and a save button (I changed the text to "Close')

Everything displays on the form but - the <div id="contentbody_div" class="nt-contentpanel nt-contentpanel-h"> section is only half as high as the form, so it's box shadow line cuts right through my xhtml text.

This same problem exists with the footer.  It is positioned half way up my form.

So, these parts of the generated form don't seem to adjust their size and/or position for the size of the embedded xhtml that generates before it on the page.

I'm using custom css to adjust other things in the app.  But, since contentbody_div and footer don't have unique id's for each page, I can't see a way to adjust them on this page only.

(I tried wrapping my xhtml in a <div> and setting the height of that div, but that did not cause the contentbody_div to expand and it did not move the footer down.  Also, I see the Custom Classes tab seems to provide this for some parts of the form, but not for these two items.) 

I have attached a screen shot to show what I'm talking about.

Thanks

[attachment deleted by admin]

[Bruce]

I think you have a css interaction problem.
the content body doesn't have a height set by default (are you setting that?)
it doesn't have a border, or dop-shadow either, so I'm thinking you've added that in.

It might be an idea to post your site online se we can see it "live" and inspect the css for you to give a more accurate answer.

cheers
Bruce

[alan]

Bruce,

You are right.  I found some conflicting css I entered a few days ago as I was experimenting. 

Thanks for pointing me in the right direction.

Alan