Fixed Left column 1 makes first column of the last row invisible by horizontal bar over text

polachan

Hi Please help it is urgent and if you can suggest me with code it would be very appreciated. I will give you the fill scenario how it is happening.
I am listing employee name and address of the selected depots and departments from the criteria . It is mulitselection criteria to select depot and department and then it list all the employee name and address on the datatables.
Case 1. I select depot 1 and department 1 , then it list all the employee name address on the datatable with fixed column left and there is no horizontal bar over the text . We can see all the text in all the column .
Case 2. I selected Department 2 and with department 1 together from the multiselection. Then it list all the employee name and address of the depot 1 and department 1 and 2. This case, a horizontal bar will come and hide the text of the first column in the last row.
Case 3 . I selected depot 1 and department 2 only , then we can see the text in all the column and the horizontal bar will not come over the text
I can see the following code when I debug.

Code given below

<

div class="DTFC_LeftBodyLiner" style="position: relative; top: 0px; left: 0px; overflow-y: scroll; width: 144px; height: 283px; max-height: 283px;">

<

table class="display nowrap dataTable no-footer DTFC_Cloned" cellspacing="0" style="font-size: 80%; width: 100%; padding: 0px; margin: 0px;" role="grid" aria-describedby="empview_info"><thead class="thead-light">

When I change the width of the DTFC_LeftBodyLiner, into 200px, the horizontal bar will disappear and text can be read .

So when I add department 2 , DTFC_LeftBodyLiner width not automatically adjusted with maximum length of the text in the fixed column left.

Please can you suggest with code how can I resolve the issue

Pol

colin

Hi @polachan ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

polachan

I dont know how to prepare the test cases. can I attach my css and JS and cshtml file here. Is that OK for you ? Please can you let me know

colin

Hi @polachan ,

There's instructions in my last message. As I said, if you can show the problem, it will mean you'll get a better and quicker response.

Cheers,

Colin

polachan

Colin
Please can you go through the link given below. You can see the horizontal bar will make the last row invisible. How can we avoid the horizontal bar . If the first name is too long , needs to be adjusted to the width of the column and remaining parts align down rather than coming horizontal bar. I have attached herewith my html file . Please help
https://jsfiddle.net/xs0gru9L/1/

colin

Hi @polachan ,

It's because of the border here - see your fiddle here with the border solid removed. It seems that's taking up space that then affects the layout.

Cheers,

Colin

polachan

Colin
You absolutely brilliant. Thanks Very much