Topic: Checkboxes and Radio Buttons not rendering properly

jpcantalino pro asked 6 years ago


I have a form within a card and the input groups are rendering with the default style rather than MDB I'd also like to center the input groups inside the card.

jpcantalino pro answered 5 years ago


Radio buttons are now centered and listed but are still rendering as the default style.

Marta Wierzbicka staff answered 5 years ago


I made small changes in your code so try this:
<div class="row">
    <div class="col-md-4">
    </div>

    <div class="col-md-4">
    <hr>
        <div class="text-xs-center">
            <h3><i class="fa fa-heartbeat"></i> Compound Order</h3>
            <hr class="m-t-2 m-b-2">
        </div>
        <div class="text-xs-center">
            <p>Place a new order for a compounded prescription.</p>
        </div>
        <div class="card">
            <hr>
            <div class="card-block">
            <div class="md-form">
                <i class="fa fa-book prefix"></i>
                <input type="text" id="form1" class="md-input">
                <label for="form1">Species</label>
            </div>

            <div class="md-form">
                <i class="fa fa-paw prefix"></i>
                <input type="text" id="form2" class="md-input">
                <label for="form2">Pet's Name</label>
            </div>

            <div class="md-form">
                <i class="fa fa-user prefix"></i>
                <input type="text" id="form3" class="md-input">
                <label for="form3">Last Name</label>
            </div>

            <div class="md-form">
                <i class="fa fa-phone prefix"></i>
                <input type="text" id="form4" class="md-input">
                <label for="form4">Phone Number</label>
            </div>

            <div class="md-form">
                <i class="fa fa-medkit prefix"></i>
                <input type="text" id="form5" class="md-input" name="drug">
                <label for="form5" >Drug</label>
            </div>

            <div class="md-form">
                <i class="fa fa-percent prefix"></i>
                <input type="text" id="form6" class="md-input">
                <label for="form6">Dose</label>
            </div>

            <div class="md-form">
                <i class="fa fa-cogs prefix"></i>
                <input type="text" id="form7" class="md-input">
                <label for="form7">Form</label>
            </div>

            <div class="md-form">
                <i class="fa fa-hashtag prefix"></i>
                <input type="text" id="form8" class="md-input">
                <label for="form8">Quantity</label>
            </div>

            <div class="md-form">
                <i class="fa fa-user-md prefix"></i>
                <input type="text" id="form9" class="md-input">
                <label for="form9">Prescriber</label>
            </div>
            <div class="text-xs-center">
               
                <h4>Bill To:</h4>
                
                <form>

                    <fieldset class="form-group">
                        <input name="group1" type="radio" id="radio1" checked="checked">
                        <label for="radio1">Patient</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group1" type="radio" id="radio2">
                        <label for="radio2">Clinic</label>
                    </fieldset>
                    
                </form>
                   
                <h4>Delivery:</h4>
                   
                <form>
                   
                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio3" checked="checked">
                        <label for="radio3">Ship to Patient</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio4">
                        <label for="radio4">Ship to Clinic</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio5">
                        <label for="radio5">Patient Pickup</label>
                    </fieldset>
                    
                </form>
                
            </div>
            <br>

            <div class="text-xs-center">
                <button class="btn btn-default">Submit</button>
            </div>
        </div>
        </div>
    </div>
</div>

jpcantalino pro answered 5 years ago



    <div class="row">
    <div class="col-md-4">
    </div>

    <div class="col-md-4">
    <hr>
        <div class="text-xs-center white-text">
            <h3><i class="fa fa-heartbeat"></i> Compound Order</h3>
            <hr class="m-t-2 m-b-2">
        </div>
        <div class="text-xs-center white-text">
            <p>Place a new order for a compounded prescription.</p>
        </div>
        <div class="card">
            <hr>
            <div class="md-form">
                <i class="fa fa-book prefix"></i>
                <input type="text" id="form1" class="md-input"></input>
                <label for="form1">Species</label>
            </div>

            <div class="md-form">
                <i class="fa fa-paw prefix"></i>
                <input type="text" id="form2" class="md-input"></input>
                <label for="form2">Pet's Name</label>
            </div>

            <div class="md-form">
                <i class="fa fa-user prefix"></i>
                <input type="text" id="form3" class="md-input"></input>
                <label for="form3">Last Name</label>
            </div>

            <div class="md-form">
                <i class="fa fa-phone prefix"></i>
                <input type="text" id="form4" class="md-input"></input>
                <label for="form4">Phone Number</label>
            </div>

            <div class="md-form">
                <i class="fa fa-medkit prefix"></i>
                <input type="text" id="form5" class="md-input" name="drug"></input>
                <label for="form5" >Drug</label>
            </div>

            <div class="md-form">
                <i class="fa fa-percent prefix"></i>
                <input type="text" id="form6" class="md-input"></input>
                <label for="form6">Dose</label>
            </div>

            <div class="md-form">
                <i class="fa fa-cogs prefix"></i>
                <input type="text" id="form7" class="md-input"></input>
                <label for="form7">Form</label>
            </div>

            <div class="md-form">
                <i class="fa fa-hashtag prefix"></i>
                <input type="text" id="form8" class="md-input"></input>
                <label for="form8">Quantity</label>
            </div>

            <div class="md-form">
                <i class="fa fa-user-md prefix"></i>
                <input type="text" id="form9" class="md-input"></input>
                <label for="form9">Prescriber</label>
            </div>
            <div class="text-xs-center">
                <h4>Bill To:</h4>
                <form class="form-inline">

                    <fieldset class="form-group">
                        <input name="group1" type="radio" id="radio1" checked="checked">
                        <label for="radio1">Patient</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group1" type="radio" id="radio2">
                        <label for="radio2">Clinic</label>
                    </fieldset>
                </form>
                    <h4>Delivery:</h4>
                    <form class="form-inline">
                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio3" checked="checked">
                        <label for="radio3">Ship to Patient</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio4">
                        <label for="radio4">Ship to Clinic</label>
                    </fieldset>

                    <fieldset class="form-group">
                        <input name="group2" type="radio" id="radio5">
                        <label for="radio5">Patient Pickup</label>
                    </fieldset>
                </form>
            </div>
            <br>

            <div class="text-xs-center">
                <button class="btn btn-default">Submit</button>
            </div>
        </div>
    </div>

Marta Wierzbicka staff answered 6 years ago


Hi, could you paste the code of this form within a card?

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags