CODEWITHSUNDEEP
twitter-bootstrapcheckbox
Patrick
Patrick

Reputation: 105

Bootstrap Checkbox Others with textfield

I'm new to bootstrap but so far nothing comes up when i search for bootstrap checkboxes that need a custom field for "others". I'm using a horizontal form-control so width will be 100% which I need for mobile use.

Please take a look at the property type checkbox. I need an others field that must be full width of the column.

I've tried

<div class="checkbox">
    <label for="propertytype-8">
        <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
    </label>
        <input id="propertytype_other" name="propertytype_other" type="text" value=""     placeholder="other" class="form-control">
</div>

which results in

and

<div class="checkbox">
    <label for="propertytype-8">
        <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
        <input id="propertytype_other" name="propertytype_other" type="text" value=""     placeholder="other" class="form-control">
    </label>
</div>

which results in

Upvotes: 0

Views: 3483

Answers (2)

Leonid Minkov
Leonid Minkov

Reputation: 139

Here is another solution:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
    
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
            <label class="form-check-label " for="defaultCheck1"> Default checkbox </label>
            <input class="form-control form-control-sm ml-3 w-50" type="text" placeholder=".form-control-sm" style="display: inline">
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
            <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label>
        </div>
    
</div>

Upvotes: 0

Jonathan
Jonathan

Reputation: 113

add size tag

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="checkbox">
    <label for="propertytype-8">
       <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
       <input id="propertytype_other" name="propertytype_other" type="text" value="" placeholder="other" class="form-control" size="1000%">      
   </label>
</div>

Upvotes: 1

Related Questions