CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Romain
Romain

Reputation: 3673

Angular-UI Bootstrap's modal won't use bootstrap theme form

I'm having a style problem with my modal. enter image description here

Here's the code of my modal :

<script type="text/ng-template" id="contact">
    <div class="modal-header">
        <i class="fa fa-paper-plane"></i> Contact
        <a ng-click="closeModal()" style="float: right;"><i class="fa fa-times text-danger"></i></a>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form">
            <input class="col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
            <input class="col-md-6"  type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
            <input type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
            <textarea ng-model="contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
        <form>
    </div>
    <div class="modal-footer">
        The Footer Goes There
    </div>
</script>

What am I doing wrong ?

EDIT : I'm using Bootstrap 3.1.1 & UI-Bootstrap 0.11.0,

Upvotes: 0

Views: 265

Answers (1)

R Hyde
R Hyde

Reputation: 10409

Add class="form-control" to your inputs.

        <div class="modal-body">
            <form class="form-horizontal" role="form">
                <input class="form-control col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
                <input class="form-control col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
                <input class="form-control" type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
                <textarea class="form-control" ng-model=" contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
            </form>
        </div>

Upvotes: 1

Related Questions