Removing right-padding from Ext.JS buttons

Question

I have some buttons declared using Ext.NET. They have the following class:

.btn-summary {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

I set the text property on the buttons using the setText function:

myBtn.setText("Some text<div class=\"summary " + myCls + "\">" + "Some other text"</div>");

There are two classes that apply to the text here: summary and myCls where summary is:

div.summary {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 7px;
    padding: 7px;
    display: inline-block;
}

and myCls can be either of two classes, defined programmatically:

.bad {
    background-color: #FF4630;
    border-bottom-color: #FF4630;
    border-top-color: #FF4630;
    font-weight: bold;
    color: white;
    text-align: center;
}

.good {
    background-color: #00FFB3;
    border-color: #00FFB3;
    font-weight: bold;
    text-align: center;
}

I have observed that everything in this setup works as expected (buttons render where they're supposed to, the highlighted portion goes out to the borders of the button as it's supposed to) except that there's about a two/three-pixel padding outside the boundaries of the div but inside the button which I can't account for. Examination of the HTML reveals the following:

<a class="x-btn btn-summary x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" tabindex="0" style="right: auto; left: 85px; margin: 0px; top: 0px;">
    <span id="btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-toolbar-small "> 
        <span id="FaultedDashboardsSummary-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-toolbar-small x-btn-button-center  x-btn-text">
            <span id="btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-toolbar-small">
                Some text
                <div class="summary good">
                    Some other text
                </div>
            </span>
        </span>
    </span>
</a>

The issue appears to be the .x-btn-inner-default-toolbar-small class. The problem here is that I can't change this from the Ext.NET side because I only have access down to the top level (the one defined by the a tag) so how can I add a CSS class to the inner-most span from Ext.JS?

Ihsan S · Answer 1 · 2018-11-12T20:36:22.867

2

Can't say anything without seeing a visualisation but I would recommend checking CSS !important

.btn-summary {
    padding-right: 0 !important;
}

What does !important mean in CSS?

Also, you can try adding box-sizing to your elements

.btn-summary {
    box-sizing: border-box;
}

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

edited Nov 12 '18 at 20:36

answered Nov 12 '18 at 20:30

Ihsan S

54
6

1

I updated my question. Your answer would work if not for the sillyness that is Ext.JS – Woody1193 Nov 12 '18 at 20:58

score 0 · Accepted Answer · answered Nov 13 '18 at 22:16

0

Given the inner class .x-btn-inner-default-toolbar-small was causing the padding issue, adding this CSS rule fixed the problem:

.btn-summary .x-btn-inner-default-toolbar-small {
    padding-right: inherit;
}

answered Nov 13 '18 at 22:16

Woody1193

7,252
5
40
90

Removing right-padding from Ext.JS buttons

2 Answers2