CODEWITHSUNDEEP
jqueryhtmlcssdatatables
Urvashi Bhatt
Urvashi Bhatt

Reputation: 529

How can I remove vertical scrolling in datatable if I zoom 67%

In my html Jquery data table I don't want vertical and horizontal scrolling so in normal zoom(100%) that table are display properly this is good but if I reduce zoom(67%) at that time vertical scrolling are come so how can I remove this vertical scrolling?

This is my normal image that I want

Normal image

This image is for 67% zoom

67% zoom image

Here is my datatable code:

<table  datatable="ng" dt-options="table.dtOpt_SalesEntry" dt-column-defs="table.dtColDefs_SalesEntry" class="row-border hover table-responsive display nowrap">
<thead>
    <tr>
        <th class="thbg">{{'salesorder.sales_sr'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtyorder'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtypur'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_unit'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_uprice'| translate}}</th>
        <th class="thbg">Charge Feb.</th>
        <th class="thbg">Charge Labor</th>
        <th class="thbg">Charge Material</th>
        <th class="thbg">Charge Nre.</th>
        <th class="thbg">Charge Stencil</th>
        <th class="thbg">Charge Design</th>
        <th class="thbg">Charge Other</th>
        <th class="thbg">{{'salesorder.sales_action'| translate}}</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th class="thbg">{{'salesorder.sales_sr'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtyorder'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtypur'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_unit'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_uprice'| translate}}</th>
        <th class="thbg">Charge Feb.</th>
        <th class="thbg">Charge Labor</th>
        <th class="thbg">Charge Material</th>
        <th class="thbg">Charge Nre.</th>
        <th class="thbg">Charge Stencil</th>
        <th class="thbg">Charge Design</th>
        <th class="thbg">Charge Other</th>
        <th class="thbg">{{'salesorder.sales_action'| translate}}</th>
    </tr>
</tfoot>
<tbody>
    <tr ng-repeat="list in table.process_data.sale_entry">
        <td>{{ $index + 1}}</td>
        <td>{{ list.qty_ordered}}</td>
        <td>{{ list.qty_purchased}}</td>
        <td>{{ list.entryunit}}</td>
        <td>{{ list.unit_price}}</td>
        <td>{{list.charge_fab}}</td>
        <td>{{list.charge_labor}}</td>
        <td>{{list.charge_material}}</td>
        <td>{{list.charge_nre}}</td>
        <td>{{list.charge_stencil}}</td>
        <td>{{list.charge_design}}</td>
        <td>{{list.charge_other}}</td>
        <td>
            <button type="button" class="btn btn-sm btn-warning tbar" ng-click="table.editEntry($index);table.SalesEntryInput = true" uib-tooltip="{{'crm.TOOLTIPMSG.EDITBUTTON'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top" ><i class="fa fa-pencil fa-lg"></i></button>
            <button class="btn btn-sm btn-danger tbar" ng-click="table.demo5('entry', list.id)" uib-tooltip="{{'crm.TOOLTIPMSG.DELETEMSG'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top" ><i class="fa fa-trash-o fa-lg"></i></button>
        </td>
    </tr>
</tbody>
</table>

Upvotes: 1

Views: 710

Answers (1)

Tiramonium
Tiramonium

Reputation: 867

Unless you mean to apply the same rule to other places, set it manually to this table either with an inline style attribute or a <style> tag at the beginning of the page setting the table overflow: hidden !important;

<table datatable="ng" dt-options="table.dtOpt_SalesEntry" dt-column-defs="table.dtColDefs_SalesEntry" style="overflow: hidden !important;" class="row-border hover table-responsive display nowrap">

Upvotes: 1

Related Questions