CODEWITHSUNDEEP
jqueryhtmlcss
sam
sam

Reputation: 427

Override css with your own css

I have a layout coming from a 3rd party source which I need to override in my own css. I am able to change the styles by using common css rules like:

#someid-div input[type=checkbox]{
    display:block;
}

and 

#someid-container .h1 {
    font-size:20px !important;
}

but now i have a different situation in which I need to wrap around or introduce additional tags to show the desired layout. e.g.

<div class="row" style="margin-bottom: 20px;">
            <div class="form-group col-sm-6">
                <label class="control-label" for="email">Email</label>
                <input name="email" class="form-control" id="email" type="text">
            </div>
 </div>

to something like:

<div class="row" style="margin-bottom: 20px;">
    <div class="form-group col-sm-4">
       <label class="control-label" for="email">Email</label>
    </div>
    <div class="form-group col-sm-6">
        <input name="email" class="form-control" id="email" type="text">
    </div>
</div>

Is this possible in CSS? Or do I need to use jquery for it? A code snippet would be appreciated. Thanks

Upvotes: 1

Views: 88

Answers (2)

bibliophilsagar
bibliophilsagar

Reputation: 1753

You can achieve it using jquery. Something like this will do.

    $(".row").empty();
    var html = '<div class="form-group col-sm-4"><label class="control-label" for="email">Email</label></div><div class="form-group col-sm-6"><input name="email" class="form-control" id="email" type="text"></div>';
    $(".row").append(html);

Insert it after your intended operation is successful.

Upvotes: 1

Arg0n
Arg0n

Reputation: 8423

Something like this in jQuery (untested):

var label = $("label[for='email']");
var parent = label.parent();
$("<div>").setClass("form-group col-sm-4").append(label).insertBefore(parent);

Upvotes: 0

Related Questions