dynamically setting textbox width using jQuery not working

Question

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>

Hagbourne · Accepted Answer · 2016-09-01 14:22:45Z

2

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.

answered Sep 1, 2016 at 14:22

Hagbourne

988 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dinotom Over a year ago

I'm aware of the difference between the two, and that is noted in the post. I tried width first and thought the maxWidth was overriding so I tried resetting maxWidth. I'm using the standard bootstrap css style sheet.

depperm · Accepted Answer · 2016-09-01 14:25:24Z

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>

Well it works fine in your snippet, and that's how I first tried it, but it is NOT expanding my text box on my page

Sahil Lakhwani · Accepted Answer · 2016-09-01 14:47:04Z

0

Two things which worked for me:

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

Remove the ';' after 'px'

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

It's the max-width property.

answered Sep 1, 2016 at 14:47

Sahil Lakhwani

1182 silver badges11 bronze badges

Collectives™ on Stack Overflow

dynamically setting textbox width using jQuery not working

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related