Kendo toolbar misbehave - asp.net-mvc

I'm having a problem implementing a toolbar for kendo grid. The problem is a partial view used to load a left-sided menu for a specific module in the website application.
So far, I have not been able to work around this, thus I'm asking here for help.
This is what the grid looks like without the left menu:
This is what the grid looks like with the left menu:
So far, this is what the menu code has:
<nav class="navbar navbar-default navbar-left" style="margin:0px; padding:0px; border-color:lightgray;">
<div class="collapse navbar-collapse" style="margin:0px; padding:0px;">
<ul class="nav navbar-">
#if (Request.IsAuthenticated)
{
<li>
<a href="#Url.Action("Index", "FicheiroIdqa")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Ficheiros Idqa
</a>
</li>
<li>
<a href="#Url.Action("Index", "ZaPe")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> ZaPes
</a>
</li>
<li>
<a href="#Url.Action("Index", "LocalColheita")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Locais Colheita
</a>
</li>
<li>
<a href="#Url.Action("Index", "FamiliaParametro")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Famílias Parâmetro
</a>
</li>
<li>
<a href="#Url.Action("", "")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Editais
</a>
</li>
<li>
<a href="#Url.Action("Index", "Resultados")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Export. Resultados
</a>
</li>
}
</ul>
</div>
And this is the code in the view, where I am calling the partial with the menu:
#model List<INL.InLabLimsAqua.OnlineResults.WebApp.ViewModels.FicheiroIdqaViewModel>
#{ ViewBag.Title = "Ficheiros Idqa"; }
<h5>#Html.ActionLink("Ersar", "Index", "Ersar") > #ViewBag.Title</h5>
<hr />
<div class="col-md-2" style="padding-left:0px; width:200px;">
#Html.Partial("~/Views/Ersar/_ErsarMenu.cshtml")
</div>
<div class="col-md-offset-1" style="padding-left:95px;">
...
grid configuration
...
</div>
I think the problem resides in the fact that the toolbar is being loaded in the same row as the left menu, and it pushes it down with its height.
Any help to fix this would be much appreciated.

Related

Bootstrap 5 navbar dropdown-menu leaves screen

I have a menu that is aligned to the right. The last menu is a dropdown menu. But the dropdown menu items doesn't stay on the screen. Half of it leaves the screen. I have been googling but I can't find the class that kepps it on screen.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="./img/BMB-logo.svg" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
As you can see in an older question, the dropdown-menu needs to be right aligned. In Bootstrap 5, dropdown-menu-right has changed to dropdown-menu-end...
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="//placehold.it/75" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo
The accepted answer doesn't work for me due to the following CSS style:
.dropdown-menu[style] {
right: auto !important;
}
which overrides the right:0; property of .dropdown-menu-end. Removing the !important or adding it to the .dropdown-menu-end forces the dropdown to align right as intended.

List showing the last 3 items

I use this code for my slider in my view
but I want to show the last 3 items
<div class="flexslider">
<ul class="slides">
#foreach (var item in ViewBag.blog)
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>
<div class="flexslider">
<ul class="slides">
#foreach (var item in ((List<your Model>)ViewBag.blog).Skip(((List<your Model>)ViewBag.list).Count-3))
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>

Validation in dropdown goes wrong in ASP.Net mvc

I have a login page, but whenever I typed wrong credentials it showing the mainheader for login person but with no name.. See the image I attached for further explanations
login
login with wrrong credentials
this is what it look like when the person login successfully, it have name and company
View form
<ul class="nav navbar-nav navbar-right">
#{
AccountContactVM customer = (AccountContactVM)ViewBag.AccountData;
}
#if (customer.User == customer.User && customer.User != null )
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-user-circle fa-fw fa-lg" aria-hidden="true"</i>
#customer.User.FirstName #customer.User.LastName
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="disabled">
<div class="row">
<div class="col-md-3">
<i class="fa fa-user-circle" style="font-size:40px;padding:5px 20px;" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<p style="padding-top:5px;">
#customer.User.FirstName #customer.User.LastName
<br />
#customer.Company.AccountName
</p>
</div>
</div>
</li>
<li class="divider"></li>
<li><a asp-controller="Account" asp-action="Index">Customer Portal</a></li>
<li class="divider"></li>
<li><a a asp-controller="Account" asp-action="LogOut">Logout</a></li>
</ul>
</li>
}
else
{
<li><a asp-controller="Account" asp-action="SignUp">Register</a></li>
<li><a asp-controller="Account" asp-action="SignIn"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>Login</a></li>
}
<li ng-cloak><span class="glyphicon glyphicon-shopping-cart"></span></i>Cart(<strong>{{CartCount}}</strong>)</li>
</ul>

Custom Helper can't render content of PartialView

The html.Partial doesn't working very well, in fact it shows just path ~/Views/Shared/IconMenuPSA.cshtml, instead of showing the HTML content.
Where am I doing wrong?
My simple custom Helper in App_Code folder:
Helper
#using System.Web.Mvc.Html
#helper DefaultTitle(System.Web.Mvc.HtmlHelper html, string content) {
<br />
<div class="well well-sm text-center text-primary">
html.Partial("~/Views/Shared/IconMenuPSA.cshtml")
<p style="font-size:x-large">#content</p>
</div>
}
View
#model DatiGeneraliViewModel
#{
ViewBag.Title = "DatiGenerali";
Layout = "~/Views/Shared/_LayoutMainPage.cshtml";
}
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
#MyHelper.DefaultTitle(Html, "Dati Generali")
PartialView
<div style="float:left">
<!-- Split button -->
<div class="btn-group">
<a href="MainPage" class="btn btn-primary" title="Torna al cruscotto">
<span class="glyphicon glyphicon-tasks"></span>
</a>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Cruscotto</li>
<li role="separator" class="divider"></li>
<li>Dati Generali</li>
<li role="separator" class="divider"></li>
<li>Riepilogo </li>
</ul>
</div>
</div>
How do I fix this?
Thanks.

Bootstrap Drop down navigation in MVC

I have the following navigation on MVC using bootstrap, how can I make the Storage Menu Link (second li ) as a drowndown to include Add and View Links without removing the #ActionLink?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/Home/Home">News Library</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="#ActiveLink("Home", "Home", null)">#Html.ActionLink("Home", "Home", "Home")</li>
<li class="#ActiveLink("About", "Home", null)">#Html.ActionLink("Storage", "Add", "Storage")</li>
<li class="#ActiveLink("Contact", "Home", null)">#Html.ActionLink("Activites", "Add", "Activites")</li>
<li class="#ActiveLink("Contact", "Home", null)">#Html.ActionLink("Search", "Index", "Search")</li>
</ul>
<ul class="nav pull-right">
<li>#Html.ActionLink("[Log Out]", "Logout", "Home")</li>
</ul>
</div>
</div>
</div>
</div>
<li class="#ActiveLink("Home", "Home", null) dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Storage
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("Storage", "Add", "Storage")</li>
<li>#Html.ActionLink("Storage", "View", "Storage")</li>
</ul>
</li>
See the bootstrap site for more information

Resources