MVC Razor Column headers extend beyond page on intranet published site

138 views Asked by At

I had a problem with MVC Razor Column headers extending beyond the web page area.

However, by wrapping my table in a div tag:

<div style="overflow:scroll">

the column headers (and data also) work just fine with a relevant horizontal scrollbar for my MVC 5.2.2 project using VS 2013 Premium Debugger.

However, when I "publish" it to an intranet site -- quite the experience in and of itself, don't forget to add it to your ie "intranet" zone in internet options, but I digress, the problem re-occurs. The header is extremely ugly with a "bar" extending off page, and the rightmost headers totally unreachable.

Although I changed this part of the MVC project many days ago, I changed some markup and verified that the new version is being "published" to the intranet site.

Does anyone have any insight into why an html tag would work in the debugger but not on a published intranet site? Does it have to do with Internet Explorer 10 (10.0.9200.x) options or something?

1

There are 1 answers

0
JosephDoggie On BEST ANSWER

I found the culprit myself {I really did hope for an answer here}; I am hoping this will help someone else.

I should have posted more code:

I had the following

<div style="overflow:scroll">
    <h3>Index</h3>
    <table class="tableStyle">
         <tr style="position:relative;overflow:scroll">

turns out that the last line (for the row), the position attribute "interferes" with the scroll-- for whatever reason, this didn't show up in my VS2013 debug environment, but did on the intranet.

One needs to remove that (position:relative;"for it to work correctly. The adjusted solution is:

<div style="overflow:scroll">
    <h3>Index</h3>
    <table class="tableStyle">
         <tr style="overflow:auto">

Thus it is the tr element that needs to be fixed.

If one truly needed the position:relative set, which I don't, not sure what one would do!

Finally, such things are sometimes helped by editing the .css file, making a class, and marking an attribute as important, but I did not do that in my case....