javascript - Customize Modal Height and Width in CSS Media Print Queries -

i have modal generated jquery ui library(http://jqueryui.com/dialog/#modal-form). want print dialog using css media print queries.

this code:

$("#mypreview_modal").dialog({     autoopen: false,     draggable: true,     height: 520,     modal: true,     resizable: false,     width: 525,      buttons: {         "print": function() {                               //initialize elements unprintable             $('body').children().addclass('donotprint');             myid_print_id($('.printthis'));         },         "close": function() {                              $( ).dialog( "close" );         }     }         });  

html code of modal (#mypreview_modal) generated jquery ui library:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" aria-describedby="mypreview_modal" aria-labelledby="ui-id-2" style="height: auto; width: 525px; top: 81px; left: 212px; display: block; z-index: 101;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle donotprint"><span id="ui-id-2" class="ui-dialog-title">id preview</span><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div><div id="mypreview_modal" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 426px;">                <div id="preview_options" class="container donotprint">                     <div id="preview" class="btn-group">           <button id="preview_front" type="button" class="btn btn-primary">front view</button>           <button id="preview_back" type="button" class="btn btn-primary">back view</button>           <button id="preview_dousided" type="button" class="btn btn-primary">double sided</button>         </div>       </div>        <div id="front" class="printthis donotprint">           <img id="student_front" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/student_front.png">           <img id="myid_info_photo" class="duo_photo" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/id-background.jpg">           <div id="myid_info_college" class="duo_college">ceit</div>           <div id="myid_info_idnumber" class="duo_idnumber">101-03043</div>           <img id="myid_info_signature" class="duo_signature" src="data:image/png;base64,ivborw0kggoaaaansuheugaaafqaaabkcayaaabwx8j9aaaerkleqvr4xu3vaq0aaajdmpbvgh0sxcf7ku84agqiecba4l3avk8gaaecbagqidag3rmqiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecbaw6h6aaaecbagebax6oeqrcbagqicaqfcdbagqieagigdqaywkqiaaaqiedlofiecaaaecaqgdhihrbaiecbagynd9aaecbagqcagy9ecjihagqiaaaypubwgqiecaqedaoadkfieaaqiecbh0p0caaaecbaicbj1qoggecbagqmcg+wecbagqibaqmoibekugqiaaaqig3q8qiecaaigageeplcgcaqiecba4r7eazwdjxlyaaaaasuvork5cyii=">           <div id="myid_info_course" class="duo_course">bscs</div>           <div id="myid_info_name" class="duo_name">alyssa e. gono</div>           <div id="myid_info_barcode" class="duo_barcode" style="padding: 0px; overflow: auto; width: 324px;"><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 20px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #ffffff; height: 55px; width: 20px"></div><div style="clear:both; width: 100%; background-color: #ffffff; color: #000000; text-align: center; font-size: 10px; margin-top: 5px;">101-03043</div></div>       </div>        <div id="back" class="printthis donotprint">           <img id="student_back" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/student_back.png">           <div id="myid_info_osas_phone" class="duo_osas_phone">341-2786-233</div>           <div id="myid_info_osas_email" class="duo_osas_email">osas@carsu.edu.ph</div>           <div id="myid_info_guardian" class="duo_guardian">sabiniano l. gono</div>           <div id="myid_info_guardian_phone" class="duo_guardian_phone">+639087686224</div>           <div id="myid_info_osas_hotline" class="duo_osas_hotline">085-342-4451</div>           <img id="myid_info_registrar_signature" class="duo_registrar_signature">           <div id="myid_info_registrar" class="duo_registrar">merinessa d. gonzaga</div>                     </div>             </div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix donotprint"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">print</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">close</span></button></div></div></div> 

i want customize whole modal height , width during printing, using css media print queries:

@media print {     .ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-dialog-buttons .ui-draggable     {        height: 1055px;        width: 350px;      } } 

unfortunately code doesnt work. appreciated.

@media print {.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-dialog-buttons .ui-draggable{height: 1055px !important;width: 350px !important; }}