Reputation: 26281

Position button element directly over input element

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

<!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>

Upvotes: 0

Answers (3)

divy3993

Reputation: 5810

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.

Upvotes: 1

user1032531

Reputation: 26281

This doesn't work and is not an acceptable answer. Just posting it as a possible idea...

https://jsbin.com/qejivarixa/edit?html,output

<!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" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                var dialog = $('<div/>').dialog({
                    modal: true,
                    create: function( event, ui ) {
                        $( "#_upload" ).wrap( $("<div />",{style:'position: relative;overflow: hidden;width:100px'})).after(
                            $('<input/>',{
                                type:'file',
                                name:'bla',
                                style:'position: absolute;top: 0;right: 0;margin: 0;padding: 0;font-size: 20px;cursor: pointer;opacity: 0;filter: alpha(opacity=0);',
                            }).fileupload()
                        );
                    },
                    buttons: [
                        {
                            id:'_upload',
                            text: 'Upload',
                        },
                        {
                            text: 'Save',
                            disabled: true,
                        },
                        {
                            text: 'Cancel',
                            click    : function() {$(this).dialog("close");}
                        }
                    ]
                });                
            });
        </script>
    </head>

    <body></body> 
</html>

Upvotes: 0

EL OUFIR Hatim

Reputation: 419

I think you want to customize the file upload button, why not doing it as below :

<html>
    <head>
        <title>Testing</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <style type="text/css">
            .fileUpload {
                position: relative;
                overflow: hidden;
                margin: 10px;
            }
            .fileUpload input.upload {
                position: absolute;
                top: 0;
                right: 0;
                margin: 0;
                padding: 0;
                font-size: 20px;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
            }
        </style>

    </head>

    <body>
        <div class="fileUpload btn btn-primary">
            <span>Upload</span>
            <input type="file" class="upload" />
        </div>
    </body> 
</html>

Take a look here : http://goo.gl/A74FLi

Upvotes: 0

Position button element directly over input element

Answers (3)

Related Questions