Search code examples
htmltelerik

Cannot get a linefeed AND bold to work in a HTML button

I just want to add a line break and then make the second line bold inside a button. The button happens to be a telerik Kendo button, but I don't think that is the problem. I have tried both bold and strong.

                    <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlagsRefresh(true)">Set Print<br /><b>TRUE</b></kendo-button>
                <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlagsRefresh(false)">Set Print<br />FALSE</kendo-button>

I can get bold OR I can get a line feed....but not both!

enter image description here

The full code for that div is as follows:

                <div class="col-10 text-center" style="border-style: solid; border-color: black; border-width: thin;">
                <b>Action Buttons --==></b>
                <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlagsRefresh(true)">Set Print<b>TRUE</b></kendo-button>
                <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlagsRefresh(false)">Set Print<br />FALSE</kendo-button>
                <kendo-button name="markComplete" type="button" onclick="markComplete(true)">Complete: True</kendo-button>
                <kendo-button name="markNotComplete" type="button" onclick="markComplete(false)">Complete: False</kendo-button>
                <kendo-button name="resetCheckDate" type="button" onclick="resetCheckDate()">Reset Chck Date &Aacute; Num To Blank</kendo-button>
                @*<kendo-button name="docolors" type="button" onClick="ChangeColors()">colors test</kendo-button>*@

            </div>

the CSS for the buttons is simple so far:

    .k-button {
    background-image: none;
    border-color: #f26730;
    border-width: 1px;
}
Solution

  • Kendo adds display: flex to it's buttons which will cause multiple elements (the b tag in this case) to align horizontally. Adding flex-direction: column to your .k-button class and keeping the b tag will make b tag be positioned below the rest of the button's inner HTML content. You can even remove the line-break since it is no longer needed.

    But be sure to add this through an additional class or ID so it does not affect all your buttons.