overflow is not working in this code

Question

I have a table contains item. the items are in the x axis. I want to handle the overflow by adding a horizantal scrol on that table.

This is my css

.agent-table-wrap {
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow:auto;
}

This is my html:

<div class="thirdDiv">
                 <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>
                 <div class="agent-table-wrap">
                     <table id="agentsTable" runat="server">
                         <tr class="psdg-top" id="agentsNames">
                             <td class="title">Agent Name</td>
                         </tr>
                         <tr class="psdg-middle" id="agentsStatuses">
                             <td class="title">Agent Status</td>
                         </tr>
                     </table>
                 </div>
             </div>

but the scrol becomes on all the page, not just on the table

check this please:

Before overflow:

enter image description here

After overflow:

enter image description here

Add a width or max-width for overflow to take effect.

Sirko
– Sirko

2014-04-19 08:52:31 +00:00
Commented Apr 19, 2014 at 8:52 — Sirko
– Sirko, Commented Apr 19, 2014 at 8:52

Kevin Lynch · Accepted Answer · 2014-04-19 08:54:19Z

1

You will need to set a width otherwise it will adopt a width of 100%. Also you may wish to specify overflow-x: scroll; to apply scrolling horizontally only.

.slNewClass {
   width: 15%;
}

.agent-table-wrap {
    width: 80%;
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow-x: scroll;
}

answered Apr 19, 2014 at 8:54

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2208349 Over a year ago

This works fine. +1. will accept the answer once the system allows

San · Accepted Answer · 2014-04-19 08:53:38Z

1

Is this what you are looking for

Fiddle

 .thirdDiv{max-height:200px; overflow:auto}

answered Apr 19, 2014 at 8:53

San

1,2472 gold badges14 silver badges31 bronze badges

3 Comments

user2208349 Over a year ago

your solution didn't help me. my problem not on the thirdDiv but in the table inside it.

San Over a year ago

this one stackoverflow.com/questions/14834198/…

user2208349 Over a year ago

+1 to your efforts with me. they another guy helped me

Collectives™ on Stack Overflow

overflow is not working in this code

Before overflow:

After overflow:

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Before overflow:

After overflow:

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related