Снятие правого отступа с кнопок Ext.JS

Question

У меня есть несколько кнопок, объявленных с использованием Ext.NET. У них есть следующий класс:

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

Я установил свойство text на кнопках с помощью функции setText:

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

Здесь есть два класса, применимых к тексту: summary и myCls, где summary:

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

и myCls может быть одним из двух классов, определенных программно:

.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;
}

Я заметил, что все в этой настройке работает должным образом (кнопки отображаются в том месте, где они должны быть, выделенная часть выходит за границы кнопки, как это и должно быть), за исключением того, что примерно два / три пикселя заполнение за пределами div, но внутри кнопки, которую я не могу объяснить. Изучение HTML показывает следующее:

<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>

Похоже, проблема в классе .x-btn-inner-default-toolbar-small. Проблема в том, что я не могу изменить это со стороны Ext.NET, потому что у меня есть доступ только к верхнему уровню (определенному тегом a), так как я могу добавить класс CSS к внутреннему наибольшее расстояние от Ext.JS?

Answer 1

Учитывая, что внутренний класс .x-btn-inner-default-toolbar-small вызывал проблему с заполнением, добавление этого правила CSS устранило проблему:

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

Answer 2

Не могу ничего сказать, не увидев визуализацию, но я бы порекомендовал проверить CSS !important

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

Что означает! Важное в CSS?

Кроме того, вы можете попробовать добавить размеры элементов к вашим элементам

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

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