Span Spacing in Button Text

[Gregg]

We recently upgraded from release 2017.2.621.440 to release 2019.1.115.

Previously, the following code:

<button id='texCov_setEmpty' class='tcov-button'>1. Set All Adjustments to <span> No </span> Adjustment</button><br />
<button id='texCov_setPreferred' class='tcov-button'>2. Set All Adjustments to <span> Preferred </span> Adjustment</button><br />
<button id='texCov_setLowest' class='tcov-button'>3. Set All Adjustments to <span> Lowest Overlap </span></button>

.tcov-button > span {
   font-weight: bold;
}

 

would display properly, but with the upgrade to the new release the leading/trailing spaces in the span are removed/ignored (see attached file).

Not a big deal - I fixed it by modifying the CSS:

.tcov-button > span {
   font-weight: bold;
   margin-left: 3px;
   margin-right: 3px;
}

 

I was just wondering if I was doing something, or if an unintended change had occurred at some point?

Thanks, Gregg

 

 

 

 

[Marin Bratanov]

Hi Gregg,

The provided markup does not contain Kendo classes or widgets and as such should not be affected by our stylesheets. In the following dojo I see the expected behavior where the buttons are as wide as their texts and this is not related to the Kendo styles: https://dojo.telerik.com/@bratanov/ijukawUV and here's the same code with the R1 2019 version: https://dojo.telerik.com/@bratanov/ePoHUWEl. I'm also attaching below a screenshot that shows the expected results as a reference and so you can confirm if I am missing something.

With this in mind, it seems to me that there is a site-specific stylesheet that controls the layout of the buttons and this is the most likely place where a change has occurred - perhaps a teammate has made some changes there.

If this is not the case, could you modify the dojo above to showcase the way the Kendo codebase is used and the problem, so I can take a look?

On a side note, depending on the desired effect, the white-space rule may be a useful alternative to margins for rendering spaces as-is in the markup:

.tcov-button {
  white-space: pre-wrap;

}

Regards,
Marin Bratanov
Progress Telerik