html - Issue with label text post image upload in php
First of all, a big thanks for considering the question.
This is more of a ui related query, i have a product management page through which a new product can be added to ecommerce site, the issue i am facing is :
After uploading the file (profilepic) input, the label defined for file name is somehow pushing the button used to upload the pic the pic to the right instead of displaying the name on the right side.
The code is in the middle snippet, scrolling all the way to the bottom of the snippet, you should be able to locate it.
I have attached an image of the same.
Kindly help me with this issue, post file upload, i want the label to come on the right side next to the upload button
<!DOCTYPE html>
<html lang="en">
<body class="dashboard-upload">
<!--================================
START DASHBOARD AREA
=================================-->
<section class="dashboard-area">
<div class="dashboard_menu_area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="dashboard_menu">
<li>
<a href="index.php">
<span class="lnr lnr-home"></span>Sales</a>
</li>
<li>
<a href="">
<span class="lnr lnr-cog"></span>Store</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Landing Page</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Manage Users</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Digital Wallet</a>
</li>
<li class="active">
<a href="">
<span class="lnr lnr-upload"></span>Upload New Item</a>
</li>
<li>
<a href="dashboard-manage-item.html">
<span class="lnr lnr-briefcase"></span>Support Tickets</a>
</li>
</ul>
<!-- end /.dashboard_menu -->
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
<div class="dashboard_contents">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="dashboard_title_area">
<div class="pull-left">
<div class="dashboard__title">
<h3>Upload Your Item</h3>
</div>
</div>
</div>
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
<div class="row">
<div class="col-lg-8 col-md-7">
<form action="#">
<div class="upload_modules">
<div class="modules__title">
<h3>Item Name & Description</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<label for="category">Select Category</label>
<div class="select-wrap select-wrap2">
<select name="country" id="category" class="text_field">
<option value="garina">Garina Game Cards</option>
<option value="pubg">Pubg Game Cards</option>
<option value="ps">Play Station</option>
<option value="xbox">Xbox</option>
<option value="netflix">Netflix</option>
<option value="itunes">Itunes</option>
<option value="google">Google Play</option>
</select>
<span class="lnr lnr-chevron-down"></span>
</div>
</div>
<div class="form-group">
<label for="product_name">Product Name
<span>(Max 100 characters)</span>
</label>
<input type="text" id="product_name" class="text_field" placeholder="Enter your product name here...">
</div>
<div class="form-group no-margin">
<p class="label">Short Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Short Description.">
</div>
<div class="form-group no-margin">
<p class="label">Long Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Long Description">
</div>
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules module--upload">
<div class="modules__title">
<h3>Image</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<div >
<!-- Image is being uploaded here -->
<div class="custom_upload">
<label for="profilepic">
<input type="file" id="profilepic" name="profilepic" class="files">
<span class="btn btn--round btn--sm">Choose File</span>
</label>
<label for="profilepic"></label>
</div>
<!-- end /.custom_upload -->
<div >
<div >
</div>
</div>
<!-- end /.progress_wrapper -->
</div>
<!-- end /.upload_wrapper -->
</div>
<!-- end /.form-group -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules">
<div class="modules__title">
<h3>Others Information</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="dimension">Release Date</label>
<input type="text" id="dimension" class="text_field" placeholder="Date first available" value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
<div class="form-group">
<label for="dimension">Updated On</label>
<input type="text" id="dimension" class="text_field" placeholder="Last Updated On"value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
</div>
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules with--addons">
<div class="modules__title">
<h3>Price</h3><br><br>
<label>For Regular Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
<br>
<label>For Premium Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
</div>
<!-- end /.module_title -->
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<!-- submit button -->
<button type="submit" class="btn btn--round btn--fullwidth btn--lg">Add New Item</button>
</form>
</div>
<!-- end /.col-md-8 -->
<div class="col-lg-4 col-md-5">
<aside class="sidebar upload_sidebar">
<div class="sidebar-card">
<div class="card-title">
<h3>Upload Details</h3>
</div>
<div class="card_content">
<div class="card_info">
<h4>Image Upload</h4>
<p>Please use an imahe of only png/jpg/jpeg format so that nothing in the site breakes.</p>
</div>
<div class="card_info">
<h4>Upload Location</h4>
<p>This product will be available in the store post submission without any delays.</p>
</div>
<div class="card_info">
<h4>Getting Error ?</h4>
<p>Make sure all details are filled, clear your browser cache or try in private mode. If the problem continues, this can be a serious issue in the software kindly connect with the developer as soon as possible at adity@xyberneo.com</p>
</div>
</div>
</div>
<!-- end /.col-md-4 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
</section>
<!--================================
END DASHBOARD AREA
=================================-->
<!--//////////////////// JS GOES HERE ////////////////-->
<!-- inject:js -->
<script src="js/vendor/jquery/jquery-1.12.3.js"></script>
<script src="js/vendor/jquery/popper.min.js"></script>
<script src="js/vendor/jquery/uikit.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/chart.bundle.min.js"></script>
<script src="js/vendor/grid.min.js"></script>
<script src="js/vendor/jquery-ui.min.js"></script>
<script src="js/vendor/jquery.barrating.min.js"></script>
<script src="js/vendor/jquery.countdown.min.js"></script>
<script src="js/vendor/jquery.counterup.min.js"></script>
<script src="js/vendor/jquery.easing1.3.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/slick.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/trumbowyg.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/main.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBeySPFGz7DIUTrReCRQT6HYaMM0ia0knA"></script>
<script src="js/map.js"></script>
<!-- endinject -->
<script>
var profilePic = document.getElementById('profilepic'); /* finds the input */
function changeLabelText() {
var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
if (profilePicValue !== '') {
profilePicLabelText.textContent = profilePicValue; /* changes the label text */
}
}
profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
</script>
</body>
</html>
Answer
Solution:
Use span tag before input tag
Try this
Source