CODEWITHSUNDEEP
cssinheritance
Noble-Surfer
Noble-Surfer

Reputation: 3172

CSS class doesn't seem to be inheriting/ overwriting properties correctly

I'm working on a 'reset password' function for a VB.net application, where an admin user can reset the password for a user when they have been forgotten their password.

The function currently works correctly, however, I now want to disable this 'reset password' button when the user's account is locked- as admin will have to unlock the account before they can reset the password, so disabling the 'reset password' button will give them a visual prompt that the account needs to be unlocked before the password can be reset.

There is a CSS class for the type of button that the 'reset password' button is, called mainsubmit, and I want to inherit from this class to create one for a 'disabled reset password' button.

The CSS currently is:

.mainsubmit {
    padding: 6px;
    font-size: 2.4em;
    width: 100%;
}

and just below this, I've added:

.mainsubmit .disabledpasswordresetbutton {
    pointer-events: none;
    opacity: 0.5;
}

In the VB, I have:

If lockedOutUser.IsLockedOut Then
    btnResetPassword.Enabled = False
    btnResetPassword.CssClass = "mainsubmit.disabledpasswordresetbutton"
End If

However, when I now view the application in the browser, if the user's account is locked, the 'reset password' button is greyed out correctly, but it doesn't seem to have inherited the other properties of the mainsubmit CSS class- for some reason, it's much smaller than the other mainsubmit buttons that are also displayed on that page.

Why hasn't the button belonging to .mainsubmit .disabledpasswordresetbutton inherited the size and other attributes from the .mainsubmit CSS class?

Upvotes: 1

Views: 49

Answers (2)

bkis
bkis

Reputation: 2587

As i said in my comment: The space in your CSS selector (.mainsubmit .disabledpasswordresetbutton) makes it match all elements of class disabledpasswordresetbutton that are children of elements of class mainsubmit. Maybe that's not what you want. If you remove that space, it will match all elements that carry both classes (just like in your VB code):

.mainsubmit {
  padding: 6px;
  font-size: 2.4em;
  width: 100%;
}

.mainsubmit.disabledpasswordresetbutton {
  pointer-events: none;
  opacity: 0.5;
}
<button type="button" class="mainsubmit">Enabled</button>
<button type="button" class="mainsubmit disabledpasswordresetbutton">Disabled</button>

EDIT: Also, as @MrLister pointed out in the comments, the HTML notation for adding multiple classes via the class attribute is class names separated by spaces. You only use the . in the CSS selectors.

Upvotes: 1

tom
tom

Reputation: 10601

I'm not sure but sounds like your selector is not matching. try:

.mainsubmit.disabledpasswordresetbutton {
    pointer-events: none;
    opacity: 0.5;
}

Upvotes: 1

Related Questions