javascript - CSS - Right and bottom border of Grid and Property Panel not showing up in Print Preview -

javascript - CSS - Right and bottom border of Grid and Property Panel not showing up in Print Preview -

good day. have web application , there's part programatically print form grid panel , property grid on button press. grids both show finish borders when view them in browser. however, print preview dialog not show right , bottom border of grids.

to clear, it's far right , far bottom borders not showing - borders between column headers , between header , rows show up.

i used @media css query far, it's worked on showing background of column headers of both grids. have feeling i'm doing wrong in css.

here code utilize grid panel css:

@media all{ .receiptgrid .x-grid-body{ border-left: lean solid black; border-right: lean solid black; border-bottom: lean solid black; border-top: lean solid black; padding: 0px; } .receiptgrid .x-grid-header-ct{ border: 0px; border-top: 0.5px solid #000000; border-bottom: 0.5px solid #000000; border-right: 1px solid #000000; padding: 0px; } .receiptgrid .x-grid-header-ct .x-box-inner .x-column-header-inner{ border: 0px; border-top: 0.5px solid #000000; border-bottom: 0.5px solid #000000; border-left: lean solid #000; background: lightgray; padding: 0px; margin: 0px; font-size: 11px; font-weight: bold; font-family: 'arial'; text-align: center; -webkit-print-color-adjust:exact; } }

and code utilize css of property grid:

@media all{ .propgrid .x-grid-cell { border-right: lean solid black; } /* changes css amount column */ .propgrid .x-grid-cell-value { text-align: right !important; font-size: 17px; font-weight: bold; font-style: italic; font-family: 'times new roman'; line-height: normal; border-right: lean solid black; } /* changes css amount column disabled */ .propgrid .x-grid-cell-value .x-item-disabled{ background: white; text-align: right !important; font-size: 17px; font-weight: bold; font-style: italic; font-family: 'times new roman'; line-height: normal; border-right: lean solid black; } /* changes css mode column */ .propgrid .x-grid-cell-name { font-size: 11px; font-weight: bold; font-family: 'arial'; text-align: center !important; vertical-align: center; border-right: lean solid black; } /* changes header text */ .propgrid .x-column-header-inner { border-left: lean solid black; border-bottom: lean solid black; border-top: lean solid black; padding: 0px; font-size: 11px; font-weight: bold; font-family: 'arial'; text-align: center; vertical-align: center; } .propgrid .x-grid-body{ border-left: lean solid black; border-bottom: lean solid black; border-top: lean solid black; border-right: lean solid black; padding: 0px; } .propgrid .x-grid-header-ct{ border: 0px; border-top: 0.5px solid black; border-bottom: 0.5px solid black; padding: 0px; } .propgrid .x-grid-header-ct .x-box-inner{ border: 0px; border-top: 0.5px solid black; border-bottom: 0.5px solid black; border-right: lean solid black; padding: 0px; } .propgrid .x-grid-header-ct .x-box-inner .x-column-header-inner{ border: 0px; border-top: 0.5px solid black; border-bottom: 0.5px solid black; border-left: lean solid black; background: lightgray; -webkit-print-color-adjust:exact; padding: 0px; margin: 0px; font-size: 11px; font-weight: bold; font-family: 'arial'; text-align: center; } }

i think have overlapping css properties in property grid i've had bad experiences css i'm not changing since it's working pretty decently.

here grid panel code:

{ xtype: 'gridpanel', x: 50, y: 240, border: '1 1 1 1', cls: 'receiptgrid', height: 120, itemid: 'pfgridpanelitems', maxheight: 120, maxwidth: 500, minheight: 120, minwidth: 500, padding: 0, style: 'border: 0.5;\nborder-color: black;', width: 500, bodyborder: true, bodypadding: 0, header: false, title: 'my grid panel', syncrowheight: false, columnlines: true, enablecolumnhide: false, enablecolumnmove: false, enablecolumnresize: false, rowlines: false, scroll: 'none', sealedcolumns: true, sortablecolumns: false, store: 'pfreceipt', columns: [ { xtype: 'gridcolumn', height: 30, maxheight: 30, maxwidth: 100, minheight: 30, minwidth: 100, style: 'background: pinkish !important;', width: 100, dataindex: 'description', emptycelltext: 'pf', text: 'description', flex: 1 }, { xtype: 'datecolumn', height: 30, itemid: 'date', maxheight: 30, maxwidth: 100, minheight: 30, minwidth: 100, width: 100, dataindex: 'date', text: 'date', flex: 1, editor: { xtype: 'datefield', itemid: 'datefield', margin: '9 0 0 0', fieldlabel: 'date', hidelabel: true, value: '2014-11-01', emptytext: 'mm-dd-yyyy', format: 'y-m-d', submitformat: 'y-m-d' } }, { xtype: 'gridcolumn', height: 30, maxheight: 30, maxwidth: 100, minheight: 30, minwidth: 100, width: 100, dataindex: 'check', text: 'check', flex: 1, editor: { xtype: 'textfield', height: '100%', width: '100%', allowblank: false, allowonlywhitespace: false, emptytext: 'check no.' } }, { xtype: 'gridcolumn', height: 30, maxheight: 30, maxwidth: 100, minheight: 30, minwidth: 100, width: 100, dataindex: 'bank', text: 'bank', flex: 1, editor: { xtype: 'textfield', height: '100%', width: '100%', emptytext: 'bank' } }, { xtype: 'numbercolumn', height: 30, maxheight: 30, maxwidth: 100, minheight: 30, minwidth: 100, shrinkwrap: 0, width: 100, dataindex: 'amount', text: 'amount', flex: 1, editor: { xtype: 'textfield', height: '100%', itemid: 'mytextfield5', shrinkwrap: 0, width: '100%', emptytext: 'amount', enablekeyevents: true } } ], viewconfig: { getrowclass: function(record, rowindex, rowparams, store) { homecoming 'child-row'; }, border: '1 1 1 1', itemid: 'pfreceiptgrid' }, plugins: [ ext.create('ext.grid.plugin.cellediting', { }) ] },

and here property grid

{ xtype: 'propertygrid', x: 570, y: 210, border: '1 1 1 1', cls: 'propgrid', itemid: 'pfgridpanelmode', maxwidth: 200, minwidth: 200, width: 200, bodyborder: true, frameheader: false, header: false, title: 'payment mode', scroll: 'none', sealedcolumns: true, sortablecolumns: false, source: { cash: 0, check: 0, total: 0 }, sourceconfig: { //huge block of sourceconfig code here } }

i using sencha architect not have html file.

can help me how create right , bottom borders display during print preview? help much appreciated. give thanks you.

javascript css3 extjs extjs4 extjs4.2