CODEWITHSUNDEEP
javascripthtmlcss
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1626

How to make input full width of its container?

I have a box inside bootstrap input and link inside.But below as you can see,input isn't full width.How can I make it full?

enter image description here

You can see there's gap between input and link.I want to make that gap instead of input width.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
} 
       
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Upvotes: 0

Views: 148

Answers (5)

Heena Vora
Heena Vora

Reputation: 300

.resetToDef - display:flex; and input - flex:1;

this will work for you.

.resetToDef {
  display: flex;
  width: 25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}

.resetToDef a {
  font-size: 12px;
  color: #FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input {
 flex:1;
  border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="resetToDef">
  <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
  <a href="" class="float-right btn"> Back to default</a>
</div>

Upvotes: 0

Buttered_Toast
Buttered_Toast

Reputation: 991

You can use flex and flex grow to achieve that.

.resetToDef {
    display: flex;
}

.resetToDef input {
    flex-grow: 1;
}

What this will do is set the parent to be a flex container so that direct children can use the flex properties.

Now we set the input to be 'flex-grow: 1;', that will tell the input to "grow" (take up what available space remains) and be full available width.

Don't forget that your elements have padding which can seem like the elements don't take the full available width.

Upvotes: 0

tanvi korgaonkar
tanvi korgaonkar

Reputation: 361

Remove width given to the input element and make resetToDef display flex.

.resetToDef{
  display: flex;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
  justify-content: space-between;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 
 border:none;
} 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Upvotes: 0

ROOT
ROOT

Reputation: 11622

Can be something like this:

.resetToDef{
  display: block;
  width:100%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:80%;
 border:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Upvotes: 0

Ahmad
Ahmad

Reputation: 12737

Just utilize the built in bootstrap class for form input group input-group.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef input-group">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Upvotes: 1

Related Questions