How to create a box around around controls in webprgramming












0














I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:



Create a group box around certain controls on a web form using CSS



What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.



I would like to create a grey box similar to the ones found on this webpage:



https://img.labnol.org/di/trigger1.png



Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.



Here is the HTML:



<!DOCTYPE html>

<html>

<head>

<script>

/* Script written by Adam Khoury @ DevelopPHP.com */

/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

function _(el){

    return document.getElementById(el);

}

function uploadFile(){

    var file = _("file1").files[0];

    // alert(file.name+" | "+file.size+" | "+file.type);

    var formdata = new FormData();

    formdata.append("file1", file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("progress", progressHandler, false);

    ajax.addEventListener("load", completeHandler, false);

    ajax.addEventListener("error", errorHandler, false);

    ajax.addEventListener("abort", abortHandler, false);

    ajax.open("POST", "file_upload_parser.php");

    ajax.send(formdata);

}

function progressHandler(event){

    //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

    var percent = (event.loaded / event.total) * 100;

    _("progressBar").value = Math.round(percent);

    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";

}

function completeHandler(event){

    _("status").innerHTML = event.target.responseText;

    _("progressBar").value = 0;

  document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

}

function errorHandler(event){

    _("status").innerHTML = "Upload Failed";

}

function abortHandler(event){

    _("status").innerHTML = "Upload Aborted";

}



function changeText()

{

    document.getElementById('p1').innerHTML = "1 file selected";

}



</script>



<link rel="stylesheet" href="test.css">



</head>

<body>

<h2>Upload</h2>



<fieldset>

<legend>Group 1</legend>

<form id="upload_form" enctype="multipart/form-data" method="post">

  <input type="file" name="file1" id="file1"><br>

<p id="p1">Drag your file here or click in this area.</p>

  <input type="button" value="Upload File" onclick="uploadFile()">

  <progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>

  <h3 id="status"></h3>

  <p id="loaded_n_total"></p>

</form>

</fieldset>



<script>

// self executing function here

(function() {

   document.getElementById('upload_form')[0].onchange = changeText;



})();

</script>



</body>

</html>


Here is the CSS (which is referred to in the html as test.css):



body{

  background: rgba(0,0,0,0.0);

}

form{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -100px;

  margin-left: -250px;

  width: 500px;

  height: 200px;

  border: 4px dashed #0D0D0D;

}

form p{

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 140px;

  color: #0D0D0D;

  font-family: Arial;

}



h2{

    text-align: center;



}



form input[type="file"]{

  position: absolute;

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  outline: none;

  opacity: 0;

}



form input[type="button"]{

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 508px;

  height: 35px;

  margin-top: -20px;

  margin-left: -4px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover{

  background: #149174;

    color: #0C5645;

}



form input[type="button"]:active{

  border:0;

}



form progressBar{

    text-align: center;

}


Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.



I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.



Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.






html css







share|improve this question






















  • The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
    – Alex K
    Nov 20 at 21:25
















0














I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:



Create a group box around certain controls on a web form using CSS



What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.



I would like to create a grey box similar to the ones found on this webpage:



https://img.labnol.org/di/trigger1.png



Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.



Here is the HTML:



<!DOCTYPE html>

<html>

<head>

<script>

/* Script written by Adam Khoury @ DevelopPHP.com */

/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

function _(el){

    return document.getElementById(el);

}

function uploadFile(){

    var file = _("file1").files[0];

    // alert(file.name+" | "+file.size+" | "+file.type);

    var formdata = new FormData();

    formdata.append("file1", file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("progress", progressHandler, false);

    ajax.addEventListener("load", completeHandler, false);

    ajax.addEventListener("error", errorHandler, false);

    ajax.addEventListener("abort", abortHandler, false);

    ajax.open("POST", "file_upload_parser.php");

    ajax.send(formdata);

}

function progressHandler(event){

    //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

    var percent = (event.loaded / event.total) * 100;

    _("progressBar").value = Math.round(percent);

    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";

}

function completeHandler(event){

    _("status").innerHTML = event.target.responseText;

    _("progressBar").value = 0;

  document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

}

function errorHandler(event){

    _("status").innerHTML = "Upload Failed";

}

function abortHandler(event){

    _("status").innerHTML = "Upload Aborted";

}



function changeText()

{

    document.getElementById('p1').innerHTML = "1 file selected";

}



</script>



<link rel="stylesheet" href="test.css">



</head>

<body>

<h2>Upload</h2>



<fieldset>

<legend>Group 1</legend>

<form id="upload_form" enctype="multipart/form-data" method="post">

  <input type="file" name="file1" id="file1"><br>

<p id="p1">Drag your file here or click in this area.</p>

  <input type="button" value="Upload File" onclick="uploadFile()">

  <progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>

  <h3 id="status"></h3>

  <p id="loaded_n_total"></p>

</form>

</fieldset>



<script>

// self executing function here

(function() {

   document.getElementById('upload_form')[0].onchange = changeText;



})();

</script>



</body>

</html>


Here is the CSS (which is referred to in the html as test.css):



body{

  background: rgba(0,0,0,0.0);

}

form{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -100px;

  margin-left: -250px;

  width: 500px;

  height: 200px;

  border: 4px dashed #0D0D0D;

}

form p{

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 140px;

  color: #0D0D0D;

  font-family: Arial;

}



h2{

    text-align: center;



}



form input[type="file"]{

  position: absolute;

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  outline: none;

  opacity: 0;

}



form input[type="button"]{

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 508px;

  height: 35px;

  margin-top: -20px;

  margin-left: -4px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover{

  background: #149174;

    color: #0C5645;

}



form input[type="button"]:active{

  border:0;

}



form progressBar{

    text-align: center;

}


Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.



I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.



Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.






html css







share|improve this question






















  • The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
    – Alex K
    Nov 20 at 21:25














0












0








0







I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:



Create a group box around certain controls on a web form using CSS



What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.



I would like to create a grey box similar to the ones found on this webpage:



https://img.labnol.org/di/trigger1.png



Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.



Here is the HTML:



<!DOCTYPE html>

<html>

<head>

<script>

/* Script written by Adam Khoury @ DevelopPHP.com */

/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

function _(el){

    return document.getElementById(el);

}

function uploadFile(){

    var file = _("file1").files[0];

    // alert(file.name+" | "+file.size+" | "+file.type);

    var formdata = new FormData();

    formdata.append("file1", file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("progress", progressHandler, false);

    ajax.addEventListener("load", completeHandler, false);

    ajax.addEventListener("error", errorHandler, false);

    ajax.addEventListener("abort", abortHandler, false);

    ajax.open("POST", "file_upload_parser.php");

    ajax.send(formdata);

}

function progressHandler(event){

    //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

    var percent = (event.loaded / event.total) * 100;

    _("progressBar").value = Math.round(percent);

    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";

}

function completeHandler(event){

    _("status").innerHTML = event.target.responseText;

    _("progressBar").value = 0;

  document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

}

function errorHandler(event){

    _("status").innerHTML = "Upload Failed";

}

function abortHandler(event){

    _("status").innerHTML = "Upload Aborted";

}



function changeText()

{

    document.getElementById('p1').innerHTML = "1 file selected";

}



</script>



<link rel="stylesheet" href="test.css">



</head>

<body>

<h2>Upload</h2>



<fieldset>

<legend>Group 1</legend>

<form id="upload_form" enctype="multipart/form-data" method="post">

  <input type="file" name="file1" id="file1"><br>

<p id="p1">Drag your file here or click in this area.</p>

  <input type="button" value="Upload File" onclick="uploadFile()">

  <progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>

  <h3 id="status"></h3>

  <p id="loaded_n_total"></p>

</form>

</fieldset>



<script>

// self executing function here

(function() {

   document.getElementById('upload_form')[0].onchange = changeText;



})();

</script>



</body>

</html>


Here is the CSS (which is referred to in the html as test.css):



body{

  background: rgba(0,0,0,0.0);

}

form{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -100px;

  margin-left: -250px;

  width: 500px;

  height: 200px;

  border: 4px dashed #0D0D0D;

}

form p{

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 140px;

  color: #0D0D0D;

  font-family: Arial;

}



h2{

    text-align: center;



}



form input[type="file"]{

  position: absolute;

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  outline: none;

  opacity: 0;

}



form input[type="button"]{

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 508px;

  height: 35px;

  margin-top: -20px;

  margin-left: -4px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover{

  background: #149174;

    color: #0C5645;

}



form input[type="button"]:active{

  border:0;

}



form progressBar{

    text-align: center;

}


Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.



I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.



Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.






html css







share|improve this question













I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:



Create a group box around certain controls on a web form using CSS



What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.



I would like to create a grey box similar to the ones found on this webpage:



https://img.labnol.org/di/trigger1.png



Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.



Here is the HTML:



<!DOCTYPE html>

<html>

<head>

<script>

/* Script written by Adam Khoury @ DevelopPHP.com */

/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

function _(el){

    return document.getElementById(el);

}

function uploadFile(){

    var file = _("file1").files[0];

    // alert(file.name+" | "+file.size+" | "+file.type);

    var formdata = new FormData();

    formdata.append("file1", file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("progress", progressHandler, false);

    ajax.addEventListener("load", completeHandler, false);

    ajax.addEventListener("error", errorHandler, false);

    ajax.addEventListener("abort", abortHandler, false);

    ajax.open("POST", "file_upload_parser.php");

    ajax.send(formdata);

}

function progressHandler(event){

    //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

    var percent = (event.loaded / event.total) * 100;

    _("progressBar").value = Math.round(percent);

    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";

}

function completeHandler(event){

    _("status").innerHTML = event.target.responseText;

    _("progressBar").value = 0;

  document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

}

function errorHandler(event){

    _("status").innerHTML = "Upload Failed";

}

function abortHandler(event){

    _("status").innerHTML = "Upload Aborted";

}



function changeText()

{

    document.getElementById('p1').innerHTML = "1 file selected";

}



</script>



<link rel="stylesheet" href="test.css">



</head>

<body>

<h2>Upload</h2>



<fieldset>

<legend>Group 1</legend>

<form id="upload_form" enctype="multipart/form-data" method="post">

  <input type="file" name="file1" id="file1"><br>

<p id="p1">Drag your file here or click in this area.</p>

  <input type="button" value="Upload File" onclick="uploadFile()">

  <progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>

  <h3 id="status"></h3>

  <p id="loaded_n_total"></p>

</form>

</fieldset>



<script>

// self executing function here

(function() {

   document.getElementById('upload_form')[0].onchange = changeText;



})();

</script>



</body>

</html>


Here is the CSS (which is referred to in the html as test.css):



body{

  background: rgba(0,0,0,0.0);

}

form{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -100px;

  margin-left: -250px;

  width: 500px;

  height: 200px;

  border: 4px dashed #0D0D0D;

}

form p{

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 140px;

  color: #0D0D0D;

  font-family: Arial;

}



h2{

    text-align: center;



}



form input[type="file"]{

  position: absolute;

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  outline: none;

  opacity: 0;

}



form input[type="button"]{

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 508px;

  height: 35px;

  margin-top: -20px;

  margin-left: -4px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover{

  background: #149174;

    color: #0C5645;

}



form input[type="button"]:active{

  border:0;

}



form progressBar{

    text-align: center;

}


Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.



I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.



Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.






html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 20 at 19:05









philm

327315




327315












  • The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
    – Alex K
    Nov 20 at 21:25


















  • The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
    – Alex K
    Nov 20 at 21:25
















The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
– Alex K
Nov 20 at 21:25




The reason why your form appears outside the box is because it uses position: absolute. See developer.mozilla.org/en-US/docs/Web/CSS/position
– Alex K
Nov 20 at 21:25












1 Answer
1






active

oldest

votes


















1














The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.



Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.



Here's a snippet with the changes I just mentioned:






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





Hope it helps!






share|improve this answer























  • Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
    – philm
    Nov 20 at 22:40












  • So it looks like that the changes broke the function of selecting a file to upload
    – philm
    Nov 20 at 23:08










  • Ok so it looks like that the input file object is moved to above the dotted box
    – philm
    Nov 20 at 23:39










  • So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
    – philm
    Nov 21 at 0:18






  • 1




    You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
    – Giorgio Zanni
    Nov 21 at 0:54











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399866%2fhow-to-create-a-box-around-around-controls-in-webprgramming%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.



Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.



Here's a snippet with the changes I just mentioned:






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





Hope it helps!






share|improve this answer























  • Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
    – philm
    Nov 20 at 22:40












  • So it looks like that the changes broke the function of selecting a file to upload
    – philm
    Nov 20 at 23:08










  • Ok so it looks like that the input file object is moved to above the dotted box
    – philm
    Nov 20 at 23:39










  • So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
    – philm
    Nov 21 at 0:18






  • 1




    You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
    – Giorgio Zanni
    Nov 21 at 0:54
















1














The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.



Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.



Here's a snippet with the changes I just mentioned:






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





Hope it helps!






share|improve this answer























  • Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
    – philm
    Nov 20 at 22:40












  • So it looks like that the changes broke the function of selecting a file to upload
    – philm
    Nov 20 at 23:08










  • Ok so it looks like that the input file object is moved to above the dotted box
    – philm
    Nov 20 at 23:39










  • So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
    – philm
    Nov 21 at 0:18






  • 1




    You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
    – Giorgio Zanni
    Nov 21 at 0:54














1












1








1






The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.



Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.



Here's a snippet with the changes I just mentioned:






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





Hope it helps!






share|improve this answer














The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.



Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.



Here's a snippet with the changes I just mentioned:






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





Hope it helps!






body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>





body {

  background: rgba(0, 0, 0, 0.0);

}



fieldset {

  width: 508px;

  height: 270px;

  /* fixed width and height*/

  margin: 13vh auto;

}



#p1 {

  border: 4px dashed #0D0D0D;

  /* modified the actual text box instead of the entire form */

  width: 508px;

  height: 140px;

  line-height: 140px;

  margin-top: 0px;

}



form p {

  text-align: center;

  color: #0D0D0D;

  font-family: Arial;

}



h2 {

  text-align: center;

}



form input[type="file"] {

  position: absolute;

  margin: 0;

  outline: none;

  width: 508px;

  height: 140px;

  margin: 22px 4px;

  opacity: 1; 

  background-color: orange;

  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */

}



form input[type="button"] {

  margin: 0;

  color: #fff;

  background: #16a085;

  border: none;

  width: 100%;

  /* width relative to parent fieldset */

  height: 35px;

  margin-top: -20px;

  border-radius: 4px;

  border-bottom: 4px solid #117A60;

  transition: all .2s ease;

  outline: none;

}



form input[type="button"]:hover {

  background: #149174;

  color: #0C5645;

}



form input[type="button"]:active {

  border: 0;

}



form progressBar {

  text-align: center;

}

<!DOCTYPE html>

<html>



<head>

  <script>

    /* Script written by Adam Khoury @ DevelopPHP.com */

    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

    function _(el) {

      return document.getElementById(el);

    }



    function uploadFile() {

      var file = _("file1").files[0];

      // alert(file.name+" | "+file.size+" | "+file.type);

      var formdata = new FormData();

      formdata.append("file1", file);

      var ajax = new XMLHttpRequest();

      ajax.upload.addEventListener("progress", progressHandler, false);

      ajax.addEventListener("load", completeHandler, false);

      ajax.addEventListener("error", errorHandler, false);

      ajax.addEventListener("abort", abortHandler, false);

      ajax.open("POST", "file_upload_parser.php");

      ajax.send(formdata);

    }



    function progressHandler(event) {

      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;

      var percent = (event.loaded / event.total) * 100;

      _("progressBar").value = Math.round(percent);

      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    }



    function completeHandler(event) {

      _("status").innerHTML = event.target.responseText;

      _("progressBar").value = 0;

      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";

    }



    function errorHandler(event) {

      _("status").innerHTML = "Upload Failed";

    }



    function abortHandler(event) {

      _("status").innerHTML = "Upload Aborted";

    }



    function changeText() {

      document.getElementById('p1').innerHTML = "1 file selected";

    }

  </script>



  <link rel="stylesheet" href="test.css">



</head>



<body>

  <h2>Upload</h2>



  <fieldset>

    <legend>Group 1</legend>

    <form id="upload_form" enctype="multipart/form-data" method="post">

      <input type="file" name="file1" id="file1"><br>

      <p id="p1">Drag your file here or click in this area.</p>

      <input type="button" value="Upload File" onclick="uploadFile()">

      <!-- changed progressBar style -->

      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>

      <h3 id="status"></h3>

      <p id="loaded_n_total"></p>

    </form>



  </fieldset>



  <script>

    // self executing function here

    (function() {

      document.getElementById('upload_form')[0].onchange = changeText;



    })();

  </script>



</body>



</html>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 0:59

























answered Nov 20 at 21:27









Giorgio Zanni

664




664












  • Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
    – philm
    Nov 20 at 22:40












  • So it looks like that the changes broke the function of selecting a file to upload
    – philm
    Nov 20 at 23:08










  • Ok so it looks like that the input file object is moved to above the dotted box
    – philm
    Nov 20 at 23:39










  • So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
    – philm
    Nov 21 at 0:18






  • 1




    You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
    – Giorgio Zanni
    Nov 21 at 0:54


















  • Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
    – philm
    Nov 20 at 22:40












  • So it looks like that the changes broke the function of selecting a file to upload
    – philm
    Nov 20 at 23:08










  • Ok so it looks like that the input file object is moved to above the dotted box
    – philm
    Nov 20 at 23:39










  • So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
    – philm
    Nov 21 at 0:18






  • 1




    You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
    – Giorgio Zanni
    Nov 21 at 0:54
















Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
– philm
Nov 20 at 22:40






Awesome! That is it! Thank you so much. So basically, it was the CSS? As a side note, how can you add the run snippet option to the code? Is this something stack exchange automatically does now?
– philm
Nov 20 at 22:40














So it looks like that the changes broke the function of selecting a file to upload
– philm
Nov 20 at 23:08




So it looks like that the changes broke the function of selecting a file to upload
– philm
Nov 20 at 23:08












Ok so it looks like that the input file object is moved to above the dotted box
– philm
Nov 20 at 23:39




Ok so it looks like that the input file object is moved to above the dotted box
– philm
Nov 20 at 23:39












So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
– philm
Nov 21 at 0:18




So I appreciate the attempt but, this doesnt really help. The element that enables the uploading is now above my dotted box. I have been playing around for awhile now to try to re center the form upload in the box but it isn't working out
– philm
Nov 21 at 0:18




1




1




You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
– Giorgio Zanni
Nov 21 at 0:54




You're, right, I completely missed that! I updated fieldset and form input[type="file"] in the CSS. It should work now.
– Giorgio Zanni
Nov 21 at 0:54


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399866%2fhow-to-create-a-box-around-around-controls-in-webprgramming%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Create new schema in PostgreSQL using DBeaver

Image
0 At the beginning of my current job I had limited access to DB but recently my role is changed to superuser, admin, and owner. My colleague who was the previous DB admin is able to create a schema or change the permissions as there is a permission tab in the properties and he can change permissions by clicking easily. Would you please let me know how I can create schema and change permissions as well? Why his dbeaver looks different from me? He can easily right click on the schema folder on top of all schemas on the left side column and select create new schema while I do not have that, like the following picture I found on the internet. postgresql database-schema dbeaver share | improve this question
Read more

Deepest pit of an array with Javascript: test on Codility

Image
0 $begingroup$ This is the question from a Codility test, as a task in an interview: DeepestPit - problem description A non-empty zero-indexed array A consisting of N integers is given. A pit in this array is any triplet of integers (P, Q, R) such that: ·         0 ≤ P < Q < R < N; ·         sequence [A[P], A[P+1], ..., A[Q]] is strictly decreasing, i.e. A[P] > A[P+1] > ... > A[Q]; ·         sequence A[Q], A[Q+1], ..., A[R] is strictly increasing, i.e. A[Q] < A[Q+1] < ... < A[R]. The depth of a pit (P, Q, R) is the number min {A[P] − A[Q], A[R] − A[Q]}. For example, consider array A consisting of 10 elements such that: A[0] = 0 A[1] = 1 A[2] = 3 A[3] = -2 A[4] = 0 A[5] = 1 A[6] = 0 A[7] = -3 A[8] = 2 A[9] = 3 Triplet (2, 3, 4) is
Read more

Costa Masnaga

Image
.mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce o sezione sull'argomento Lombardia non cita le fonti necessarie o quelle presenti sono insufficienti . Puoi migliorare questa voce aggiungendo citazioni da fonti attendibili secondo le linee guida sull'uso delle fonti. Segui i suggerimenti del progetto di riferimento. Costa Masnaga comune Localizzazione Stato   Italia Regione Lombardia Provincia Lecco Amministrazione Sindaco Sabina Panzeri (Al centro il cittadino) dall'08/06/2009 Territorio Coordinate 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Coordinate: 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Altitudine 318 m s.l.m
Read more