Calculate width of element using jQuery

Question

How can I set the width of an input equal with 100% - width of an img?

My goal is to display both of them on the same line and make the input to take the full width of the remaining space.

This is what I got so far

HTML:

<div class="img-container">
  <img src="http://dreamatico.com/data_images/car/car-1.jpg"/>
</div>
<input class="img-url" placeholder="enter img url" />

CSS:

.img-container {
  width: 30px;
  height: 30px;
}
.img-container img {
  width: 30px;
  height: 30px;
}

jQuery:

$(document).ready(function(){
  var img_container_width = $('.img-container').width();
  $(".img-url").width('100%' - img_container_width);
});

jsfiddle: https://jsfiddle.net/bko38bt2/2/

Do you want to display img and input inline?

Nenad Vracar
– Nenad Vracar

2016-01-25 11:27:40 +00:00
Commented Jan 25, 2016 at 11:27 — Nenad Vracar
– Nenad Vracar, Commented Jan 25, 2016 at 11:27
Yes, I've update the question

Valip
– Valip

2016-01-25 11:28:29 +00:00
Commented Jan 25, 2016 at 11:28 — Valip
– Valip, Commented Jan 25, 2016 at 11:28

Nenad Vracar · Accepted Answer · 2016-01-25 11:29:22Z

2

You can do this with just css using Flexbox

.img-container {
  display: flex;
}
.img-container img {
  width: 30px;
  height: 30px;
}

input {
  flex: 1;
}

<div class="img-container">
  <img src="http://dreamatico.com/data_images/car/car-1.jpg"/>
  <input class="img-url" placeholder="enter img url" />
</div>

answered Jan 25, 2016 at 11:29

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

3 Comments

Valip Over a year ago

This works, but the problem is that the .img-container has initially display:none; because it appears only after the input has an url...

Valip Over a year ago

Moved the display: none; to the img and now everything is ok. Thanks!

Nenad Vracar Over a year ago

Great, glad i could help.

adeneo · Accepted Answer · 2016-01-25 11:33:12Z

1

Logic dictates that 100% width means fill the entire parent, so basically the same width as the parent element

$(document).ready(function() {
    $(".img-url").width(function() {
        return $(this).parent().width() - $('.img-container').width()
    });
});

If you want to inline the elements easily, float them or add display: inline-block;

FIDDLE

edited Jan 25, 2016 at 11:33

answered Jan 25, 2016 at 11:28

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Valip Over a year ago

This doesn't works, I need the input to take all blank space that remains after the image because I'm also using this for mobile devices

Collectives™ on Stack Overflow

Calculate width of element using jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related