javascript - CSS: Things get moved around in scaled-up print preview in Firefox -
page: (http://progrock.rocks/teaching_materials/loops.html).
it's (css, javascript , html) in 1 file:
<!doctype html> <!-- copyright (c) 2016 alf p. steinbach. boost 1.0 license. --> <html> <head> <meta charset="utf-8"> <title>lapper «loops» gruppeøvelse praktisk regning</title> <!-- link rel="stylesheet" href="style.css" --> <style> * { font: 10pt sans-serif; } body { margin: 0; padding: 0; background-color: white; } h1 { padding-left: 14px; padding-top: 0; padding-bottom: 0.5em; padding-right: 0; margin-top: 0; margin-bottom: 0; background-color: lightgray; font-size: xx-large; font-style: italic; color: #a0b0b0; } div#content { margin: 0; padding-left: 0; padding-right: 0; position: absolute; width: 100%; } div#input-area { left: 0; right: -0; padding-left: 14px; padding-right: 14px; padding-top: 0.5em; padding-bottom: 0.5em; margin-left: 0; margin-right: 0; background-color: #f0f0f0; } div#notes-container { left: 0; right: -0; padding-left: 14px; padding-right: 14px; padding-top: 0.5em; padding-bottom: 0.5em; margin-left: 0; margin-right: 0; /*display: none;*/ } input.number-input { width: 5em; } .access-key { text-decoration: underline; } div.note { margin-top: 0px; margin-right: 12px; margin-bottom: 8px; margin-left: 0px; padding-left: 2em; padding-right: 2em; padding-top: 1em; padding-bottom: 0.5em; background-color: #ffffb0; width: 15em; overflow: hidden; border-radius: 1em; border: 1px gray solid; display: inline-block; } div.note-figure { float: right; font-size: 4em; color: #d0e0e0; padding: 0px; margin: 0px; vertical-align: top; transform: rotate(-7deg); border-radius: 0.5em; background-color: white; } </style> <script> function item( id ) { return document.getelementbyid( id ); } function generate() { const n_notes = 11; const operand = parseint( item( "fixed-operand" ).value ); const operation = item( "operation" ).value; // +, * const start_number = (operation == "+"? 0 : 1); console.log( "generate" ) var container = item( "notes-container" ); var collection = item( "notes-collection" ); if( collection !== null ) { collection.remove(); collection = null; } var message = document.createtextnode("genererer…"); container.appendchild( message ); collection = document.createelement( "div" ); collection.id = "notes-collection"; var template = item( "note-template" ) console.log( "template = " + template ) var current = start_number; for( let = 0; < n_notes; ++i ) { let note = template.clonenode( true ); note.style.display = "inline-block"; let note_has = note.queryselector( "#note-has" ); note_has.innerhtml = "jeg har " + current.tostring() + "."; let note_seeking = note.queryselector( "#note-seeking" ); let display_op = (operation == "+"? " + " : "∙"); note_seeking.innerhtml = "hvem har " + current + display_op + operand + "?"; if( == n_notes - 1 ) { note_seeking.innerhtml = "siste tall!"; } let figure = note.queryselector( "#figure" ); switch( operation ) { case "+": figure.innerhtml = + "∙" + operand; break; case "*": figure.innerhtml = operand + "↑" + i; break; } collection.appendchild( note ); switch( operation ) { case "+": current += operand; break; case "*": current *= operand; break; } } message.remove(); container.appendchild( collection ); } function explanation_of( op ) { switch( op ) { case "+": return "dette gir en gangetabell"; case "-": return "dette gir en baklengs gangetabell"; case "*": return "dette gir en potenstabell"; case "/": return "dette gir en baklengs potenstabell"; } } function update_explanation() { item( "operation-explanation" ).innerhtml = "(" + explanation_of( item( "operation" ).value ) + ")."; } function on_command_generate() { generate(); } function on_operation_changed() { update_explanation(); } function on_document_loaded() { item( "title-header" ).innerhtml = document.title; item( "operation" ).value = "+"; update_explanation(); generate(); } </script> </head> <body onload="on_document_loaded()"> <h1 id="title-header">asdasd</h1> <div id="content"> <div id="input-area"> <select id="operation" onchange="on_operation_changed();"> <option value="+">+ (addisjon)</option> <option value="*">* (multiplikasjon)</option> </select> med fast operand <input id="fixed-operand" type="number" class="number-input" alt="det faste tallet utregningene" value="2" min="1" max="10" > <span id="operation-explanation"></span> <button onclick="on_command_generate();" accesskey="g"> <span class="access-key">g</span>enerér </button> </div> <!-- input-area --> <div id="notes-container"> <div id="note-template" class="note" style="display:none"> <div id="figure" class="note-figure"> 5∙7 </div> <div style="position: absolute"> <span id="note-has">jeg har 35</span> <br/> <br/> <span id="note-seeking">hvem har 35 + 7?</span> </div> </div> <div id="notes-collection"> </div> <!-- notes-collection --> <div> <!-- notes-container --> </div> <!-- content --> </body> </html> problem: while print preview in 100% works nicely,
when scale print preview, things after or around page break moved around , result ugly , unusable purpose:
i've tried, on machine, css property should prevent page break within div.note-figure, didn't work. sorry don't have here. i've tried googling problems firefox print preview, no luck.
i not quite sure caused printing preview problem in firefox, fixed giving each yellow note positioning, namely position: relative;, , giving text div inside note position: absolute.
i gave text-div z-index: 1 can float on large gray text when space gets crammed.
the main problem kind of solution that, without understanding of causes of problem, solution pretty arbitrary , hence not reproducible. appreciate if explain going on , why approach works. assuming it's not firefox bug?
div.note { margin-top: 0px; margin-right: 12px; margin-bottom: 8px; margin-left: 0px; padding-left: 2em; padding-right: 2em; padding-top: 1em; padding-bottom: 0.5em; background-color: #ffffb0; width: 15em; overflow: hidden; border-radius: 1em; border: 1px gray solid; display: inline-block; position: relative; } div.note-text { background-color: transparent; position: absolute; z-index: 1; } div.note-figure { float: right; font-size: 4em; color: #d0e0e0; padding: 0px; margin: 0px; vertical-align: top; transform: rotate(-7deg); border-radius: 0.5em; background-color: white; }
Comments
Post a Comment