CODEWITHSUNDEEP
jqueryhtmlcss
dinotom
dinotom

Reputation: 5162

dynamically setting textbox width using jQuery not working

I am trying to dynamically change the width of the text box which displays the file name chosen in the file dialog since some of the filenames are quite long. The code shown below does not change the size of the textbox (SelectedFile) I tried using width property as well but to no avail. Something seems to be overriding my changes.

Given the following html

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input type="file" style="display: none;" >
        </span> 
    </label>
    <input id="SelectedFile" type="text" class="form-control" readonly >
</div>

And the following jQuery

<script type="text/javascript">
        $(function () {
            //attach the `fileselect` event to all file inputs on the page
            $(document).on('change', ':file', function () {
                var input = $(this),
                    numFiles = input.get(0).files ? input.get(0).files.length : 1,
                    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

                input.trigger('fileselect', [numFiles, label]);
            });

            // Watch for our custom `fileselect` event
            $(document).ready(function () {
                $(':file').on('fileselect', function (event, numFiles, label) {

                    var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label,
                        fileLength = (label.length * 8) + 50;

                    if (input.length) {
                        input.val(log);
                    } else {
                        if (log) alert(log);
                    }
                    var newWidth = fileLength.toString() + 'px;';                        
                    $('#SelectedFile').css({ maxWidth: newWidth });
                });
            });
        });
</script>

Upvotes: 0

Views: 797

Answers (3)

Sahil Lakhwani
Sahil Lakhwani

Reputation: 108

Two things which worked for me:

  1. var newWidth = fileLength.toString() + 'px';

Remove the ';' after 'px'

  1. $('#SelectedFile').css({ 'max-width': newWidth });

It's the max-width property.

Upvotes: 0

depperm
depperm

Reputation: 10746

You can use $('#SelectedFile').attr('style','width:'+ newWidth ); to set the width and have it change dynamically

$(function () {
            //attach the `fileselect` event to all file inputs on the page
            $(document).on('change', ':file', function () {
                var input = $(this),
                    numFiles = input.get(0).files ? input.get(0).files.length : 1,
                    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

                input.trigger('fileselect', [numFiles, label]);
            });

            // Watch for our custom `fileselect` event
            $(document).ready(function () {
                $(':file').on('fileselect', function (event, numFiles, label) {

                    var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label,
                        fileLength = (label.length * 8) + 50;

                    if (input.length) {
                        input.val(log);
                    } else {
                        if (log) alert(log);
                    }
                    var newWidth = fileLength.toString() + 'px;'; 
                    $('#SelectedFile').attr('style','width:'+ newWidth );
                });
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input type="file" style="display: none;" >
        </span> 
    </label>
    <input id="SelectedFile" type="text" class="form-control" readonly >
</div>

Upvotes: 1

Hagbourne
Hagbourne

Reputation: 98

maxWidth is only defining the max width an element can have.. it does not define the actual width, which is defined by the width property.

The textbox is contained inside an element with the class "input-group". The properties on the container may affect the children. It's difficult to say exactly why width is overridden without seeing your stylesheet.

Upvotes: 2

Related Questions