I want to reposition my browse button when the user uploaded a file. This is the sample of how it should really look before and after uploading the file:

Before:

After:

I change the content of my button "Browse file" to "Replace File"

This is my html code.

<div id="uploadModal" >
          <div >
            <h2 style="font-size: 24px;">Choose file</h2>
            <p>
              Choose the csv file containing the data you want to create a forecast for.
            </p>
            <div >
              <div id="filename"></div>
              <input type="file" id="file-upload" multiple required />
              <label for="file-upload">Browse file</label>
            </div>
            <div >
              <button ><h4>Cancel</h4></button>
              <button ><h4>Proceed</h4></button>
            </div>
          </div>
        </div>

Here is my CSS

.upload-modal {
  display: none;
  position: fixed;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 34, 2, 0.3);
}
input[type="file"] { 
  position: absolute;
  opacity: 0;
  z-index: -1;
  
}
input   label {
  padding: 10px 24px;
  background: #D4E8CF;
  border-radius: 100px;
  position: static;
  width: 119px;
  height: 40px;
  border: none; 
  cursor: pointer;
  z-index: 1;
}
#filename{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  justify-content: left;
  align-items: flex-start;
}

What's happening here is that my button moves according to the length of the file so I added max-width but no luck. Thanks!

EDIT: I added css for upload-modal

CodePudding user response：

I'm not sure you need to use absolute positioning for what you want.

You could set div#upload-modal or div.modal-content to position: relative;

and then position the button element with left: or right: or use float: right;

https://developer.mozilla.org/en-US/docs/Web/CSS/position https://developer.mozilla.org/en-US/docs/Web/CSS/float

CodePudding user response：

This alternate version uses CSS's Flexbox and JavaScript's Event Listeners.

It probably doesn't do precisely what you want but should come close enough that reading through the comments a few times and playing around with the code should make clear how you can get to where you want to go using just a few lines of JavaScript to grab the file name and show it on the screen.

MDN (linked above) is a great place to get more clarity about any particular front-end feature that you're interested in using. Happy coding!

// Unnamed function runs as soon as the DOM elements are ready
window.addEventListener('DOMContentLoaded', () => {

  // Identifies some of the DOM elements
  const
    filenameSpan = document.getElementById("filename-span"),
    fileInput = document.getElementById("file-input"),
    chooseBtn = document.getElementById("choose-btn");

  // When the input changes (when a file is chosen), calls `updateDisplay`
  fileInput.addEventListener("change", updateDisplay);

  // Defines `updateDisplay`
  function updateDisplay(){

    // Puts first fiename in span and "unhides" it
    const filename = fileInput.files[0].name;
    filenameSpan.textContent = filename;
    filenameSpan.classList.remove("hidden");
  };
});

*{
  margin: 0;
}
#container{
  width: 18rem; /* "rem" unit is the base character height */
  padding: 2rem;
  border-radius: 1.5rem;
  background-color: lightgrey;
}
#header{
  margin-bottom: 2rem;
}
#chooser{
  /* flex w/ space-around makes choose-btn shift right when filename appears */
  display: flex;
  justify-content: space-around;
  margin-bottom: 4rem;
}
#options{
  text-align: right;
}

#filename-span{
  padding: 1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6rem;
}
button{ /* the "options" buttons */
  border: none;
  font-weight: bold;
  color: darkgreen;
  background-color: lightgrey;
}
#choose-btn{
  /* Not a true "button" element -- the "label" for file-input */
  padding: 1rem 1.5rem;
  background-color: darkseagreen;
  border-radius: 2rem;
  border: none;
  font-weight: bold;
}
.hidden{ /* Uses a class so all styling happens thru CSS */
  display: none;
}

<div id="container">

    <div id="header">
        <h2>Choose file</h2>
        <p> Choose the csv file containing the data you want to create a forecast for</p>
    </div>

    <div id="chooser">
        <!-- The span and input elements are initially "hidden" via CSS -->
        <span id="filename-span" ></span>
        <label id="choose-btn">
            <!-- input element is inside its stylable & clickable label -->
            Browse File
            <input id="file-input" type="file"  />
        </label>
    </div>

    <div id="options">
        <button id="cancel-btn">Cancel</button>
        <button id="proceed-btn">Proceed</button>
    </div>

</div>