Smaller fonts and buttons left justified after upgrade to 2024.4.1112

[Trena]

I upgraded my application to 2024.4.1112 and now my fonts are small and some of my buttons are left justified instead of right justified.

I am including before and after pictures.

Can someone assist with this issue?

Thanks.

[Eyup]

Hi Trena,

 

This is most probably related to the migration of the Themes from Less to Sass. A detailed explanation is available here:
https://www.telerik.com/forums/icons-in-menu-not-visible-in-latest-library-2024-q4

Can you check this answer and contact me further for the next steps?

 

Regards,
Eyup
Progress Telerik

[Trena]

Hi Eyup,

I was able to correct the font size however, the button is still pulling to the left.  It should be right justified.

Here is the code: 

<style>
 
    .addnew_wrap {
        float:right
    }

    html {
        font-size: 14px;
    }
</style>

<section class="main_cnt">
    <div class="container-fluid">
        <div class="grid_list clearfix">
            <div class="row clearfix">
                <div class="col-md-12 main_rgt">
                    <div class="panel">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.Partial("~/Views/Navigation/_CommonTabStrip.cshtml")
                                <div class="panel">
                                    @if (TempData["SuccessMessage"] != null)
                                    {
                                        <div class="alert alert-success text-center">
                                            <b>
                                                @TempData["SuccessMessage"].ToString()
                                            </b>
                                        </div>
                                    }
                                    <div id="grid" data-role="grid" class="k-grid k-widget">
                                        <div class="k-grouping-header list_header clearfix" data-role="droptarget">
                                            <div class="pull-left"> <b style="font-size:15px;">Participant List</b> </div>
                                            <div class="addnew_wrap">
                                                @Html.ActionLink("Add New Participant", "Create", new { controller = "Participants" }, new { @class = "k-button k-primary addnew" })
                                            </div>
                                        </div>

 

I didn't add all of the code just the top part. 

I am reattaching the picture.

Thanks.

 

[Trena]

Another issue I am having is deploying the application.  Are any hosting bundles needed in order to deploy the upgraded application?  I have tried deploying the application to our test web server however, I am getting an internal server error.

Thanks,

Trena

[Eyup]

Hi Trena,

The button can be fixed with CSS rules like ` justify-content: right;`:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container

But in order to provide a more precise code, I will need to reproduce the issue and see what classes like `.addnew_wrap` contain.

Can you modify the attached basic MVC web site to demonstrate the issue and send it back to me? I will then update and modify the project to apply the solution and send it back to you.

As for the development question, we are mainly an UI team and publishing is beyond our expertise. However, here is an idea which can be helpful:

1. Run the sample I provided you with this post locally.

2. Ensure that everything works properly.

3. Deploy the sample to your test web server.

4. Check if it run correctly or another internal error is thrown.

5. If it works properly, you can use it as a reference base and compare it with the original project throwing the error.

[Eyup]

Attaching the sample I mentioned in my previous post to this reply.

[Trena]

Hi Eyup,

The web server issue has been resolved. 

I will try to justify-content: right and see what happens.

Thanks for responding.

Trena

[Eyup]

That's good news!

Thank you for sharing.