CODEWITHSUNDEEP
htmlcss
Boky
Boky

Reputation: 12064

Absolute positioned div won't take the rest of the width

I have the html like this : 

<div class="addToCardButton">
  <div class="offerButtons">
    <button type="reset" class="btnReset">R</button> 
    <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    <button type="submit" class="btnSubmit">S</button>
  </div>
</div>

And the css is as follows :

.addToCardButton{
  width: 370px;
  background-color: yellow;
  position: relative;
  height: 30px
}

.offerButtons{
  width: 100%;
  position:relative;
}

.btnReset, .btnSubmit, .offerInput{
  position: absolute;
}

.btnReset{
  width: 30px;
  height: 30px;
  left: 0;
}

.btnSubmit{
  width: 30px;
  height: 30px;
  right: 0;
}

.offerInput{
 position:absolute;
 left: 35px;
 right: 35px;
 height: 24px;
}

Thus, what I want is that buttons have fixed width (30px) and that input takes the rest of the width.

I tried to do it with position absolute, but I get something like this :

enter image description here

But I want something like this :

enter image description here

Thus in my case the input doesn't take the rest of the width. What am I doing wrong?

I tried also with 

width: calc(100% - 70px);

And that worked in all good browsers, but in Edge and IE not.

Here is fiddle.

Upvotes: 2

Views: 99

Answers (4)

phobia82
phobia82

Reputation: 1257

Can you change your HTML as well? handling width, margin and padding of input is harder than div, so my recommendation is to wrap the input into another div get the width you need and then set the input 100% width. Something like this.

.addToCardButton{
  width: 370px;
  background-color: yellow;
  position: relative;
  height: 30px
}
.inputContainer{
  padding: 0 38px 0 0px;
  position:absolute;
  left:35px;
  right:0;
}
.offerButtons{
  width: 100%;
  position:relative;
}

.btnReset, .btnSubmit, .offerInput{
  position: absolute;
}

.btnReset{
  width: 30px;
  height: 30px;
  left: 0;
}

.btnSubmit{
  width: 30px;
  height: 30px;
  right: 0;
}

.offerInput{
 position:relative;
 width: 100%;
 height: 24px;
}
<div class="addToCardButton">
  <div class="offerButtons">
    <button type="reset" class="btnReset">R</button> 
    <div class="inputContainer"><input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput"></div>
    <button type="submit" class="btnSubmit">S</button>
  </div>
</div>

and the fiddle: https://jsfiddle.net/Lnb0edp2/1/

Upvotes: 1

Alan Mroczek
Alan Mroczek

Reputation: 1199

If you really care about IE and other old browsers: 

.addToCardButton {
    width: 370px;
    background-color: yellow;
    position: relative;
    height: 30px
}

.offerButtons {
    width: 100%;
    position: relative;
}

.input-wrapper {
    width: 100%;
    padding-left: 31px;
    padding-right: 35px;
    box-sizing: border-box;
}

.btnReset {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;
}

.btnSubmit {
    width: 30px;
    height: 30px;
    right: 0;
    top: 0;
    position: absolute;
}

.offerInput {
    height: 24px;
    width: 100%;
}
<div class="addToCardButton">
  <div class="offerButtons">
    <button type="reset" class="btnReset">R</button> 
    <div class="input-wrapper">
      <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    </div>
    <button type="submit" class="btnSubmit">S</button>
  </div>
</div>

Upvotes: 1

SvenL
SvenL

Reputation: 1954

With Flexbox you could even simplify and optimize your code to the following

HTML

<div class="addToCardButton">
    <button type="reset" class="btnReset">R</button>
    <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    <button type="submit" class="btnSubmit">S</button>
</div>

CSS

.addToCardButton {
  width: 370px;
  background-color: yellow;
  height: 30px;
  display: flex;
}

.btnReset,
.btnSubmit {
  width: 30px;
  height: 30px;
}

.offerInput {
  height: 24px;
  width: 100%;
  margin: 0 10px;
}


.addToCardButton {
  width: 370px;
  background-color: yellow;
  height: 30px;
  display: flex;
}
.btnReset,
.btnSubmit {
  width: 30px;
  height: 30px;
}
.offerInput {
  height: 24px;
  width: 100%;
  margin: 0 10px;
}
<div class="addToCardButton">
  <button type="reset" class="btnReset">R</button>
  <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
  <button type="submit" class="btnSubmit">S</button>
</div>

Upvotes: 2

Undecided Dev
Undecided Dev

Reputation: 830

.offerButtons doesn't have height that's why the position relative is not taking its width or height. Try making its height:100%. See this fiddle. https://jsfiddle.net/723x7nq0/4/

.offerButtons{
  width: 100%;
  position:relative;
  height:100%;
}

.offerInput{
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    height: 24px;
}

Upvotes: 0

Related Questions