This is a migrated thread and some comments may be shown as answers.

Span Spacing in Button Text

1 Answer 76 Views
Button
This is a migrated thread and some comments may be shown as answers.
Gregg
Top achievements
Rank 1
Gregg asked on 01 Feb 2019, 03:09 PM

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

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 04 Feb 2019, 01:57 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Button
Asked by
Gregg
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or