Hi all,
Need some assistance with this one please - may be something simple but I've been battling to get this right all day.
I have following this article to build a step-wise wizard: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui
Everything is working well and as expected however on my first tabstrip (content loaded from a partialview) I have several inputs for various fields.
Some fields display correctly and some is smaller in height. They are defined all the same in the source file (with the exception of the field name). Both the below samples point to string fields.
I don't have any css defined elsewhere, just bootstrap and fluent style in use.
Eg:
Form declaretion:
...
@using (Html.BeginForm("AddCRMClient", "CRM", FormMethod.Post, new { role = "form" }))
...
Displays correctly:
...
<div class="col-7">
@Html.LabelFor(m => m.CustomerName, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.CustomerName)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>
...
Height is smaller:
...
<div class="col-6">
@Html.LabelFor(m => m.VATNumber, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.VATNumber)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>
...
This is the result:
As you can see there are many controls that does not display correctly.
When I look at these via dev tools, I can see the controles that display correctly does have 2 spans which encapsulates the input, the ones that does not display correctly only has one span.
Eg:
vs.
Layout file to show referenced css, js files.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - VAPS Admin System</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
@*Core Content Start*@
<link rel="stylesheet" href="~/css/kendofonts.css" />
<script src="~/js/site.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="@Url.Content("~/lib/kendo-ui/styles/fluent-main.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/lib/jquery/jquery.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/jszip.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.all.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.aspnetmvc.min.js")"></script>
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-ZA.min.js"></script>
@*Core Content End*@
.............
What would cause this, and how do I fix it?
Using Telerik.UI.for.AspNet.Core Version 2023.3.1114 with VS 2022.
Thanks in advance.
I found the issue, for anyone else that may be struggling with something similar.
In my tabstrip I was getting the partial view like this:
.Content(@<text> @await Html.PartialAsync("_AddCRMClientStep1", Model) </text>);
Changed it to read it via the controller like this:
LoadContentFrom("_AddCRMClientStep1", "CRM", Model);
Now it works as expected.