how to override the width given in css class by other css class

Question

I am using two css class for dropdown control first css applies to all dropdown and second applies to only those dropdown that are having some specific value in custom tag (data-view="readonly-edit"). In first css I am using width:auto; to expand it fully by default, but if any dropdown is having the custom tag (data-view="readonly-edit") then don't want to apply the width:auto, to that control, that control should use width that is given in their width property itself.

My question if how do I override the "width:auto" with width given on control property itself.

Following the sample code

Css

.DropdownList {
    border-radius: 5px;
    -webkit-border-radius: 5;
    font-family: Calibri,"Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 4px 1px 4px 1px;
    border: none;
    color: #000000 !important;
    line-height: 1;
    font-size: 13.5px;
    background-color: transparent;
    pointer-events: none;
    -ms-user-select: none;
    tab-index: -1;
    cursor: default;
    opacity: 1 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    width:auto !important;
}

.DropdownList[data-view=readonly-edit] {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    padding: 5px 2px 5px 2px;
    border: 1px solid #7D7D7D;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #1E2935;
    line-height: 1.4285;
    pointer-events: auto;
    -ms-user-select: auto;
    cursor: auto;
    background-color: white !important;
    opacity: 1 !important;  

    width:0px; /*here it should auto inherit the width 
                 from control width property itself and override the 
                 width:auto given in above css*/      
}

Aspx

Auto width applying for this DropDownList

<asp:DropDownList ID="ddlAutoWithDropDown" CssClass="DropdownList" Width="110Px" runat="server">

Width given on control itself should apply for this DropDownList

<asp:DropDownList ID="ddlFixedWithDropDown" data-view="readonly-edit" CssClass="DropdownList"  Width="220Px" runat="server">

You'll be required to use an `!important` declaration for the `width` property of the selectors `.DropdownList[data-view=readonly-edit]` since you've used it for the `width` property on class `.DropdownList`. The only way you'll be *over-qualify* a rule with an `!important` declaration is with *another* rule with an `!important` declaration that is *lower* down in the cascade order **or** with a *higher specificity*. — UncaughtTypeError, Jan 11 '18 at 06:39
Possible duplicate of [How to override !important?](https://stackoverflow.com/questions/11178673/how-to-override-important) — UncaughtTypeError, Jan 11 '18 at 06:39
I would also say it is a duplicate. I was going to say that you can use the specificity rule, and then found the same suggestion in the SO post. — orabis, Jan 11 '18 at 06:42

score 0 · Answer 1 · answered Jan 11 '18 at 06:41

0

You Can Use An Style Tag inside that provide a with attribute and write important in that

<asp:DropDownList ID="ddlAutoWithDropDown" CssClass="DropdownList" style="width:110px !important;"runat="server">

answered Jan 11 '18 at 06:41

Syed Muhammad Munis Ali

176
2
10

I would caution in advising this approach, since there is *generally* no way of over-qualifying a style rule declared *inline* with an `!important` declaration. – UncaughtTypeError Jan 11 '18 at 06:44
thanks @Syed Munis Ali, the drop down I given above is just an example there hundreds of control exist in my application what is not possible to update every control style property width !important. I need any generic way if possible. – Neeraj Kumar Gupta Jan 11 '18 at 06:51
this is only the best way to override a css class by an element ! – Syed Muhammad Munis Ali Jan 11 '18 at 06:53
oh mayn ! buddy u should higglight in your question ! that you have thousands of countrols like this and this dropdown is just an example ! but know i have another [proper solution for this – Syed Muhammad Munis Ali Jan 11 '18 at 06:55
There are better methods considered better practice. If you believe your solution is the best method consider explaining why in your question so that other readers understand. – UncaughtTypeError Jan 11 '18 at 06:57
@SyedMunisAli, yes I did not mentioned that there are thousands of controls but yes I added that the code is just a sample. thanks anyway. – Neeraj Kumar Gupta Jan 11 '18 at 08:31

Neeraj Kumar Gupta · Answer 2 · 2018-01-11T09:13:35.680

I used the jquery to reassign the control width explicitly as follows

$(document).ready(function () {
    SetAutoWidth();    
});

function SetAutoWidth() {
var ddl = $("select");
ddl.each(function () {

        if (GetAttributeValue($(this), 'data-view') == 'readonly-edit') {
            $(this).attr('style', 'width:' + $(this)[0].style.width + ' !important');
            return;
        }
    } 
}

function GetAttributeValue(objectElement, attributeName) {
    var result = '';
    if (typeof (objectElement.attr(attributeName)) != 'undefined') {
        result = objectElement.attr(attributeName);
    }
    return result;
}

seems this has resolved my problem.

how to override the width given in css class by other css class

2 Answers2