Topic: Trying to get length of Text box to be equal to length of custom select

jonathn6 free asked 6 years ago


I have the following code which is being executed in a reactJS function to render html:
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for={item.idNameBedroom}>Number of BEDROOMS for unit {item.counter}</label>
</div>
<select class="custom-select" id={item.idNameBedroom}>
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
This code generates a select box which takes up 100% of the viewspace.
Then, I have this code:
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for={item.idRent}>RENT for unit {item.counter}</label>
<div className="input_100" >
<Input id={item.idRent} group type="text"/>
</div>
</div>
</div>
This code generates a text input box but it only takes up approximately 50% of the viewspace.
What class should I be using to make the input box extend to take up 100% of the viewspace?
screen image in question
I tried to upload an image to show what I am getting but I was unable to upload it correctly.

Jakub Mandra staff answered 6 years ago


Hello,   You can't upload images here, you have to upload it somewhere and paste the link :) Our mdbInput has its own wrapping elements inside component, so use it without those bootstrap divs and labels.
<Input label="RENT for unit {item.counter}" id={item.idRent} group containerClass="mb-3"/>

Regards, Jakub

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: iphone
  • Browser: chrome
  • OS: any
  • Provided sample code: No
  • Provided link: No