Topic: Checkboxes and Radio Buttons not rendering properly
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.
I'd also like to center the input groups inside the card.
Add comment
Radio buttons are now centered and listed but are still rendering as the default style.
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>
<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>
Hi,
could you paste the code of this form within a card?
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