Thank you for checking out this post. First, let's take a look at the code for a button:
<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="100%" UseSubmitBehavior="true"
OnClientClicked="showNotification" ClientIDMode="Static" CssClass="customButton">
<Icon PrimaryIconCssClass="rbSave" />
</telerik:RadButton>
This generates the following HTML:
<span id="btnSave" class="RadButton RadButton_Metro rbVerticalButton customButton"
style="display:inline-block;width:100%;" tabindex="0">
<span class="rbPrimaryIcon rbSave"></span>
<input class="rbDecorated rbPrimary" type="submit" name="ctl04$btnSave" id="btnSave_input"
value="Save" style="width:100%;padding-left:0;padding-right:4px;height:20px;" tabindex="-1">
<input id="btnSave_ClientState" name="btnSave_ClientState" type="hidden" autocomplete="off" value="{"text":"Save","value":"","checked":false,"target":
"","navigateUrl":"","commandName":"","commandArgument
":"","autoPostBack":true,"selectedToggleStateIndex":0,"validationGroup":null
,"readOnly":false,"primary":false,"enabled":true}"></span>
The button is not displaying text/value as shown in the image below and needs some height added to it.
To add height, I could:
Directly assign the height property in the markup like this,
Use an external stylesheet to apply its style instead, right?
Approach 01:
<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="100%" UseSubmitBehavior="true"
Height="20px"
After setting the height, Approach 01 renders as:
<span id="btnSave" class="RadButton RadButton_Metro rbVerticalButton customButton"
style="display:inline-block;height:20px;width:100%;height:20px;" tabindex="0">
<span class="rbPrimaryIcon rbSave"></span>...
Approach 02:
externalstylesheet.css
.RadButton .RadButton_Metro .rbVerticalButton .customButton{
height:20px !important;
}
Now, Approach 01 behaves as expected but Approach 02 (using an external stylesheet file) does not, why?