css - Why my scrollable div doesn't work inside a Bootstrap modal? -
i have problem driving me crazy. have simple div want convert scrollable one. have table inside , should easy. got separated .html file code , works well.
here is:
<div id="agreement_rate_multiple_view" style="overflow:scroll; height:100px; width:500px;"> <table id="agreement_rates_list" > <thead> <tr> <th style="background-color: #cccccc"> quantity </th> <th style="background-color: #cccccc"> amount </th> <th style="background-color: #cccccc"> effective date </th> <th style="background-color: #cccccc"> expirationdate </th> </tr> </thead> <tbody> <tr> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_quantity0" /> </td> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_amount0" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_effectivedate_edit0" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_expirationdate_edit0" /> </td> </tr> <tr> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_quantity1" /> </td> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_amount1" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_effectivedate_edit1" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_expirationdate_edit1" /> </td> </tr> <tr> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_quantity2" /> </td> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_amount2" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_effectivedate_edit2" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_expirationdate_edit2" /> </td> </tr> <tr> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_quantity3" /> </td> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_amount3" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_effectivedate_edit3" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_expirationdate_edit3" /> </td> </tr> <tr> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_quantity4" /> </td> <td style="text-align: center"> <input type="text" style="width:80px;" id="agreement_charges_edit_amount4" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_effectivedate_edit4" /> </td> <td style="text-align: center"> <input type="date" style="width:125px;" id="agreement_charges_expirationdate_edit4" /> </td> </tr> </tbody> </table> </div> that's works flawless.
now, problem that, div shows in bootstrap modal, , seems reason, because div inside of other divs, maybe div suppose scrollable, behaves according other css class.
but don't suppose happen because i'm using inline css one!!!
here screenshot of scrollable div, working ok in separated .html page:
now, here screenshot of same div, time, showing in bootstrap modal:
something force div take table height , doesn't show scrollbar either!
here link skydrive when can see original .aspx
is there way force inline css work? appreciate , sorry english. not native language.
am not sure how far work.. please try.. :)
#agreement_rate_multiple_view { overflow:scroll !important; height:100px; width:auto; }
Comments
Post a Comment