2016-01-18 37 views
0

我嘗試創建基本表單時遇到了問題。點擊添加其他文件?後,會出現一個預期的複製框,但提交順序按鈕會被推出屏幕,我似乎無法恢復。有沒有辦法解決這個問題?我工作的谷歌Apps腳本這裏是代碼:如何停止按鈕從屏幕上消失?

Code.gs

function doGet(e) { 
    return HtmlService.createHtmlOutputFromFile('HTML')  
} 

中將Html.HTML

<body> 
<style type="text/css"> 
* { 
    margin: 0 
} 
.container { 
    width: 1250px 
} 
.header { 
    display: block; 
    background-color: #8000FF; 
    margin:auto; 
    width: 50%; 
    border:3px solid #41087B; 
    padding: 10px; 
} 
.header img { 
    float:left; 
    padding: 5px; 
} 
.header h1 { 
    color: white; 
    line-height: 80px; 
    text-align:center 
} 
.label { 
    float: left; 
    padding: 5px; 
    color: red; 
} 
.label-container { 
    width: 570px; 
    margin: 0 auto; 
    text-align:center; 
    margin: auto 

} 
.label p { 

    padding: 2px; 
} 
.inputBox { 
    float:left; 
    text-align: center; 
} 
.inputBox p { 
    text-align: center; 
    padding: 1px 
} 
.label2 { 

    float:left; 
    padding:5px; 
    color: red 
} 
.label2 p { 
    padding:2px 
} 
.inputBox2 { 
    float:left; 
} 
.inputBox2 p { 
    padding: 1px 
} 
.contentBackground { 
    background-color:#D8D8D8; 
    clear:left; 
    width: 60%; 
    margin: auto; 
    height: 200px 
     display: block; 
} 
.uploadFile p { 
    text-align: center; 
    padding: 20px; 
    color:red 
} 
.content p { 
    text-align: center; 
    color:red; 
    padding: 7px 
} 
.dropDown p { 
    text-align: center; 
    padding: 40px; 
    margin-left: 8px; 
    height: 
} 
.moreFiles { 
    text-align:center 
} 
.textBox { 
    text-align: center 
} 
.textBox p { 
    text-align:center; 
    padding: 5px 
} 
input.uploadButton { 
    position: fixed; 
    bottom: 170px; 
    left: 582px 

} 
</style> 



    <div class="container"> 

    <form id="myForm"> 

    <div class="header"> 


     <h1>Order Form</h1> 

    </div> 

    <div class="label-container"> 

    <div class="label">   
     <br> 
     <p><b>Customer Name</b></p> 
     <p><b>Due Date</b></p> 
     <p><b>Phone #</b></p> 
    </div> 

    <div class="inputBox"> 
     <br> 
     <p><input type="text" name="myName"></p> 
     <p><input type="text"></p> 
     <p><input type="text"></p><br> 
    </div> 

    <div class="label2"> 
     <br> 
     <p><b>Contact</b></p> 
     <p><b>E-mail</b></p> 
     <p><b>PO#</b></p> 
    </div> 

    <div class="inputBox2"> 
     <br> 
     <p><input type="text"></p> 
     <p><input type="text"></p> 
     <p><input type="text"></p><br> 
    </div> 

    </div> 

    <div class="contentBackground"> 

    <div class="uploadWrapper"> 

     <div class="fileUpload"> 

      <div class="uploadFile"> 
       <p>Upload File: <span style="color:black"><input type="file" name="myFile" /></span></p> 
      </div> 

      <div class="content"> 
       <p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p> 
      </div> 

     </div> 

    </div> 

    <div class="dropDown"> 
     <p>Material <select style="max-width: 10%;"> 
       <option value="Paper">Paper</option> 
       <option value="Vinyl Banner">Vinyl Banner</option> 
       <option value="Adhesive Vinyl">Adhesive Vinyl</option> 
       <option value="Polygloss">Polygloss</option> 
       <option value="Translucent Vinyl">Translucent Vinyl</option> 
       <option value="Static Cling Clear">Static Cling Clear</option> 
       <option value="Static Cling White">Static Cling White</option> 
       <option value="Reverse Static Cling">Reverse Static Cling</option> 
       <option value="Outdoor Paper">Outdoor Paper</option> 
       <option value="Backlit Film">Backlit Film</option> 
       <option value="Foam">Foam</option> 
       <option value="Coroplast">Coroplast</option> 
       <option value="Corrugated Board">Corrugated Board</option> 
       <option value="Sintra">Sintra</option> 
       <option value="Canvas">Canvas</option> 
       <option value="Fabric">Fabric</option> 
       <option value="All Cling">All Cling</option> 
      </select> 
      Lamination <select> 
       <option value="None">None</option> 
       <option value="Matte">Matte</option> 
       <option value="Gloss">Gloss</option> 
       <option value="Lexan">Lexan</option> 
       <option value="Erasable">Erasable</option> 
      </select> 
      Mounting <select> 
       <option value="3/16&quot Foam">3/16" Foam</option> 
       <option value="3/16&quot Gator">3/16" Gator</option> 
       <option value="1/8&quot Sintra">1/8" Sintra</option> 
       <option value="24point Card">24point Card</option> 
       <option value="50point Card">50point Card</option> 
       <option value="Adhesive Back">Adhesive Back</option> 
       <option value="MDF">MDF</option> 
       <option value="Coroplast">Coroplast</option> 
       <option value="Masonite">Masonite</option> 
       <option value="020 Styrene">020 Styrene</option> 
       <option value="040 Styrene">040 Styrene</option> 
       <option value="060 Styrene">060 Styrene</option> 
       <option value="080 Styrene">080 Styrene</option> 
       <option value="Corrugated Board">Corrugated Board</option> 
      </select> 
      Ink <select> 
       <option value="Indoor">Indoor</option> 
       <option value="Outdoor">Outdoor</option> 
      </select></p> 
    </div> 

    </div> 

    <div class="moreFiles"> 
    <a href="#" id="add">Add another file?</a> 
    </div> 

    <div class="textBox"> 
    <p><label>Remark?</label></p> 
    <textarea></textarea> 
    </div> 

    <input type="submit" value="Submit Order" class="uploadButton" 
     onclick="this.value='Uploading..'; 
       google.script.run.withSuccessHandler(fileUploaded) 
       .uploadFiles(this.parentNode); 
       return false;"> 

    </form> 
    </div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script> 
$("#add").on("click", function() { 
var $last = $(".contentBackground").last(); 
$last.clone().insertAfter($last); 
}); 

這就是它看起來像enter image description here

這是它看起來像點擊添加另一個文件後? enter image description here

正如你所看到的提交順序按鈕消失,我不能進一步向下滾動。有沒有辦法來解決這個問題?

的jsfiddle鏈接:https://jsfiddle.net/hLzkpoxt/

回答

0

添加溢出-Y:汽車;到容器。這將允許它自動調整容器的高度,以便在列表變長時不會切斷文本/按鈕。還必須修復按鈕上的絕對位置。

<body> 

    * { 
     margin: 0 
    } 
    .container { 
     width: 1250px 
     overflow-y:auto; 
    } 
    .header { 
     display: block; 
     background-color: #8000FF; 
     margin:auto; 
     width: 50%; 
     border:3px solid #41087B; 
     padding: 10px; 
    } 
    .header img { 
     float:left; 
     padding: 5px; 
    } 
    .header h1 { 
     color: white; 
     line-height: 80px; 
     text-align:center 
    } 
    .label { 
     float: left; 
     padding: 5px; 
     color: red; 
    } 
    .label-container { 
     width: 570px; 
     margin: 0 auto; 
     text-align:center; 
     margin: auto 

    } 
    .label p { 

     padding: 2px; 
    } 
    .inputBox { 
     float:left; 
     text-align: center; 
    } 
    .inputBox p { 
     text-align: center; 
     padding: 1px 
    } 
    .label2 { 

     float:left; 
     padding:5px; 
     color: red 
    } 
    .label2 p { 
     padding:2px 
    } 
    .inputBox2 { 
     float:left; 
    } 
    .inputBox2 p { 
     padding: 1px 
    } 
    .contentBackground { 
     background-color:#D8D8D8; 
     clear:left; 
     width: 60%; 
     margin: auto; 
     height: 200px 
      display: block; 
    } 
    .uploadFile p { 
     text-align: center; 
     padding: 20px; 
     color:red 
    } 
    .content p { 
     text-align: center; 
     color:red; 
     padding: 7px 
    } 
    .dropDown p { 
     text-align: center; 
     padding: 40px; 
     margin-left: 8px; 
     height: 
    } 
    .moreFiles { 
     text-align:center 
    } 
    .textBox { 
     text-align: center 
    } 
    .textBox p { 
     text-align:center; 
     padding: 5px 
    } 
    .button { 
     text-align: center 
    } 
    input.uploadButton { 
    margin-top:50px; 
    margin: 0 auto; 
    display:block; 

} 




     <div class="container"> 

     <form id="myForm"> 

     <div class="header"> 


      <h1>Order Form</h1> 

     </div> 

     <div class="label-container"> 

     <div class="label">   
      <br> 
      <p><b>Customer Name</b></p> 
      <p><b>Due Date</b></p> 
      <p><b>Phone #</b></p> 
     </div> 

     <div class="inputBox"> 
      <br> 
      <p><input type="text" name="myName"></p> 
      <p><input type="text"></p> 
      <p><input type="text"></p><br> 
     </div> 

     <div class="label2"> 
      <br> 
      <p><b>Contact</b></p> 
      <p><b>E-mail</b></p> 
      <p><b>PO#</b></p> 
     </div> 

     <div class="inputBox2"> 
      <br> 
      <p><input type="text"></p> 
      <p><input type="text"></p> 
      <p><input type="text"></p><br> 
     </div> 

     </div> 

     <div class="contentBackground"> 

     <div class="uploadWrapper"> 

      <div class="fileUpload"> 

       <div class="uploadFile"> 
        <p>Upload File: <span style="color:black"><input type="file" name="myFile" /></span></p> 
       </div> 

       <div class="content"> 
        <p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p> 
       </div> 

      </div> 

     </div> 

     <div class="dropDown"> 
      <p>Material <select style="max-width: 10%;"> 
        <option value="Paper">Paper</option> 
        <option value="Vinyl Banner">Vinyl Banner</option> 
        <option value="Adhesive Vinyl">Adhesive Vinyl</option> 
        <option value="Polygloss">Polygloss</option> 
        <option value="Translucent Vinyl">Translucent Vinyl</option> 
        <option value="Static Cling Clear">Static Cling Clear</option> 
        <option value="Static Cling White">Static Cling White</option> 
        <option value="Reverse Static Cling">Reverse Static Cling</option> 
        <option value="Outdoor Paper">Outdoor Paper</option> 
        <option value="Backlit Film">Backlit Film</option> 
        <option value="Foam">Foam</option> 
        <option value="Coroplast">Coroplast</option> 
        <option value="Corrugated Board">Corrugated Board</option> 
        <option value="Sintra">Sintra</option> 
        <option value="Canvas">Canvas</option> 
        <option value="Fabric">Fabric</option> 
        <option value="All Cling">All Cling</option> 
       </select> 
       Lamination <select> 
        <option value="None">None</option> 
        <option value="Matte">Matte</option> 
        <option value="Gloss">Gloss</option> 
        <option value="Lexan">Lexan</option> 
        <option value="Erasable">Erasable</option> 
       </select> 
       Mounting <select> 
        <option value="3/16&quot Foam">3/16" Foam</option> 
        <option value="3/16&quot Gator">3/16" Gator</option> 
        <option value="1/8&quot Sintra">1/8" Sintra</option> 
        <option value="24point Card">24point Card</option> 
        <option value="50point Card">50point Card</option> 
        <option value="Adhesive Back">Adhesive Back</option> 
        <option value="MDF">MDF</option> 
        <option value="Coroplast">Coroplast</option> 
        <option value="Masonite">Masonite</option> 
        <option value="020 Styrene">020 Styrene</option> 
        <option value="040 Styrene">040 Styrene</option> 
        <option value="060 Styrene">060 Styrene</option> 
        <option value="080 Styrene">080 Styrene</option> 
        <option value="Corrugated Board">Corrugated Board</option> 
       </select> 
       Ink <select> 
        <option value="Indoor">Indoor</option> 
        <option value="Outdoor">Outdoor</option> 
       </select></p> 
     </div> 

     </div> 

     <div class="moreFiles"> 
     <a href="#" id="add">Add another file?</a> 
     </div> 

     <div class="textBox"> 
     <p><label>Remark?</label></p> 
     <textarea></textarea> 
     </div> 

     <input type="submit" value="Submit Order" class="uploadButton" 
      onclick="this.value='Uploading..'; 
        google.script.run.withSuccessHandler(fileUploaded) 
        .uploadFiles(this.parentNode); 
        return false;"> 

     </form> 
     </div> 





<div id="output"></div> 

</body> 





<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script> 
    $("#add").on("click", function() { 
     var $last = $(".contentBackground").last(); 
     $last.clone().insertAfter($last); 
    }); 
    </script> 

    <script> 
     function fileUploaded(status) { 
      document.getElementById('myForm').style.display = 'none'; 
      document.getElementById('output').innerHTML = status; 
     } 
    </script> 

FIDDLE