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 [email protected]</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>
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/
Bootstrap is not exclusively a CSS framework, but its most popular features are CSS-centric. These include a powerful grid, icons, buttons, map components, navigation bars, and more.
https://getbootstrap.com/
UIkit is another popular frontend wrapper that is arguably a little underrated in terms of CSS capabilities. In addition to many features similar to those found on other popular platforms, there are several useful specialized components.
https://getuikit.com/
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.