Topic: Trying to get length of Text box to be equal to length of custom select
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?
I tried to upload an image to show what I am getting but I was unable to upload it correctly.
Add comment
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
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