Table seems to block use of form objects outside of the table.

hwyckoff

I have noticed this behavior consistently: the data table has a wrapper that extends beyond the table and blocks other controls outside the table (like some form controls in the screenshot). I've had to redact sensitive information, but you can see from the Chrome Developer tab and the visible part of the screenshot that the following div overlaps the select dropdown and form submit button:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">

How can I fix this so that the invisible wrapper doesn't block use of the form controls, as you see in the screenshot?

allan

Happy to take a look at a test case showing the issue to I can try to help resolve this.

Allan

hwyckoff

It's an ASP.NET MVC index view on an internal website, so I'm not allowed to give you the full code. I can come up with a skeleton page so you can have something concrete to work with.

hwyckoff

@Allan -- I created a simple MVC project with the minimal components. I could not replicate the symptom, so it appears the culprit might be some inherited LESS or jQuery in my own property that is causing the interference. I've traced each of the class names that I saw in Chrome developer and could not find anything obvious I could tweak.

The key might be to add a relevant !important CSS line in "dataTables.bootstrap.css" that says "the margin stops at the edge of the table". Any ideas?

hwyckoff

The plot thickens: it's the "::before" tag that is causing the issue. Searching for "before" in "dataTables.bootstrap.css" doesn't land any results, so it must be coming from somewhere else.

hwyckoff

Found the culprit. I had a block intended to work with ScrollSpy. When I commented it out, the Data Tables symptom went away. Now I need to refactor the code I commented it out so it can still do what it needs to do without interfering with Data Tables.

/* To make sure in-page anchors don't hide the target content under the menubar*/
/**[id]:before {
    display: block;
    content: " ";
    margin-top: -75px;
    height: 75px;
    visibility: hidden;
}*/

allan

Hi,

Thanks for the updates and letting me know that you found the issue.

Allan