jqueryhtmlcssjquery-ui

Position button element directly over input element

How can I make #input the same size as #button, and position #button directly over #input?

enter image description here

https://jsbin.com/lovorisope

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <input id="input" type="file" name="bla" />

        <br><br>

        <button id="button" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
            <span class="ui-button-text">Upload</span>
        </button>
    </body> 
</html>
Solution

  • Since you are already using JQuery posted a solution using it.

    Have a look at this:

    $("#button").click(function(){
    $('#input').trigger('click');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input" type="file" name="bla" hidden/>
<button id="button" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Choose File</span>

</button>

    JSFiddle : DEMO

    Note : I would suggest to give custom named class/id to both the input & button, so all the same elements in your page would not get conflicted. Check this.

    .

    THE UPDATE

    Solution without using .trigger() & .click().

    Here i have gathered the left + top positions of button along with it's height + width. Which is used to position the input field using JQuery plugin .CSS

    Just as i mentioned above you will need to give custom names to classes'/ids' of this couple(button & input) to make this work.

    var btn_h = $(".upload_btn").outerHeight(); 
var btn_w = $(".upload_btn").outerWidth();

var top_pos = $(".upload_btn").position().top;
var left_pos = $(".upload_btn").position().left;

$(".cust_btn").css({
    				 height: btn_h + "px",
    				 width: btn_w + "px",    
    				 top: top_pos + "px",  
    				 left: left_pos + "px"
});
    
    .cust_btn
{
    position:absolute;
    background:lightgrey;
    z-index:9999;
    border-radius:5px;
    opacity:0;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- Added class upload_btn -->
<button id="button" type="button" class="upload_btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text">Choose File</span>
</button>
<input id="input" class="hidden_input cust_btn" type="file" name="bla" />

    JSFiddle : DEMO

    If you wan to see where this input exactly is change opacity to opacity:.5. Once again you will need to give your own class/id name.