CODEWITHSUNDEEP
javascriptjqueryhtmlcsstext
jublikon
jublikon

Reputation: 3447

Css class is overridden by jQuery

I am using BigText library to make some text to fit into div. My Problem is that the additional style I applied to the text is override and ignored. For example text-align:left is not working anymore. And the list points are not shown. How can I get the functionality of the script and add the css class?

I am calling the bigText function like that:

jQuery:

$(function() {
    $(window).on('resize', function() { 
        $(".area_competences_text").bigText();
    });

    $(window).trigger('resize');    
});

HTML:

<div class="area_competences_text">    
    <ul>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li> 
    </ul>                               
</div>

CSS: 

.area_competences_text {
    text-align: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

Upvotes: 2

Views: 92

Answers (6)

Abhirup
Abhirup

Reputation: 9

<div class="area_competences_text" style="text-align: left !important;">
...
</div>

Upvotes: 0

user2126478
user2126478

Reputation:

What I would do was to add a ID or another class to the div:

EX#1

HTML

<div class="area_competences_text" id="my_id"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

#my_id {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

EX#2

HTML

<div class="area_competences_text second_class"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

.area_competences_text.second_class {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

When you are adding ID or another class and refer to both of classes, you then are more specific about what needs to be styled.

Upvotes: 1

Mahendra Salve
Mahendra Salve

Reputation: 96

You can add !important

.area_competences_text {
    text-align: left !important;

}

Upvotes: 1

Atikur Rahman
Atikur Rahman

Reputation: 552

you can do this without using css like below:

$(function() {
        $(window).on('resize', function() { 
            $(".area_competences_text").bigText();
            $(".area_competences_text").css("text-align","left")
                                       .css("padding","5%");
        });
            $(window).trigger('resize');    
        });

Upvotes: 1

Vaibhav Patel
Vaibhav Patel

Reputation: 186

You can use !important like below:

.area_competences_text {
    text-align: left !important;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You can add !important to a setting to not let it be overridden:

.area_competences_text {
    text-align: left !important;
etc.
}

Upvotes: 0

Related Questions