I am using the following _layout and css file given below to create sidebar navigation. But when I shrink the page in to 548X725px , all the input textbox control right edge is not visible in full. I have given the image given below. The problem is coming
after adding the dropdown control for VehicleTypeList. Please can you help to fix. I assume , it is the problem with my _layout html for side bar navigation
Member
355 Points
1178 Posts
please can you help to fix my bootstrap form resize problem
Jun 15, 2020 01:03 PM|polachan|LINK
Hi
I am using the following _layout and css file given below to create sidebar navigation. But when I shrink the page in to 548X725px , all the input textbox control right edge is not visible in full. I have given the image given below. The problem is coming after adding the dropdown control for VehicleTypeList. Please can you help to fix. I assume , it is the problem with my _layout html for side bar navigation
https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing
my code
_Layout.cshtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Simple Sidebar - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" /> <!-- Custom styles for this template --> <link rel="stylesheet" href="~/css/simple-sidebar.css" /> </head> <body> <div class="d-flex" id="wrapper"> <!-- Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"> Title </div> <div class="list-group list-group-flush"> <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a> <a class="list-group-item list-group-item-action bg-light" asp-controller="Vehicle" asp-action="Index">Vehicle</a> <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a> <a href="#" class="list-group-item list-group-item-action bg-light">Events</a> <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a> <a href="#" class="list-group-item list-group-item-action bg-light">Status</a> </div> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> @*Commended by Polachan*@ @*<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li>*@ </ul> </div> </nav> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- Bootstrap core JavaScript --> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> @*<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>*@ <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> @RenderSection("Scripts", required: false) <!-- Menu Toggle Script --> <script> $("#menu-toggle").click(function (e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); </script> </body> </html>simple-sidebar.css
/*! * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar) * Copyright 2013-2019 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE) */ body { overflow-x: hidden; } #sidebar-wrapper { min-height: 100vh; margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #sidebar-wrapper .list-group { width: 15rem; } #page-content-wrapper { min-width: 100vw; } #wrapper.toggled #sidebar-wrapper { margin-left: 0; } @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } #page-content-wrapper { min-width: 0; width: 100%; } #wrapper.toggled #sidebar-wrapper { margin-left: -15rem; } }Vehicle form
548X725px @model Vehicle.Models.ViewModels.VehicleVM @{ Layout = "~/Views/Shared/_Layout.cshtml"; var title = "Create Vehicle"; } <br /> <form asp-controller="Vehicle" asp-action="UpsertVehicle" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content" class="form-horizontal" role="form" data-parsley-validate novalidate> <div class="alert-danger" asp-validation-summary="ModelOnly"></div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.Make" class="control-label col-3 col-form-label">Make</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="inputName" asp-for="Vehicles.Make" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group form-group-sm row"> <label asp-for="Vehicles.Model" class="control-label col-3 col-form-label">Model</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="inputName" asp-for="Vehicles.Model" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.RegNo" class="control-label col-3 col-form-label">Reg.No</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="inputName" asp-for="Vehicles.RegNo" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.VehicleName" class="control-label col-3 col-form-label">Description</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="inputName" asp-for="Vehicles.VehicleName" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label -for="Vehicles.MOTDate" class="control-label col-3 col-form-label">MOT Date</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="MOTDate" asp-for="Vehicles.MOTDate" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.TaxDate" class="control-label col-3 col-form-label">Tax Date</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="TaxDate" asp-for="Vehicles.TaxDate" /> <span asp-validation-for="Vehicles.TaxDate" class="text-danger"></span> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.InsuredDate" class="control-label col-3 col-form-label">Date insured</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="InsuredDate" asp-for="Vehicles.InsuredDate" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.RegDate" class="control-label col-3 col-form-label">Reg Date</label> <div class="col-9"> <input class="form-control input-sm" type="text" id="RegDate" asp-for="Vehicles.RegDate" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.VehicleStatusId" class="control-label col-3 col-form-label">Status</label> <div class="col-9"> @Html.DropDownListFor(m => m.Vehicles.VehicleStatusId, Model.VehicleStatusList, "-Select Status", new { @class = "form-control" }) <span asp-validation-for="Vehicles.VehicleStatusId" class="text-danger"></span> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label asp-for="Vehicles.VehicleTypeId" class="control-label col-3 col-form-label">Category</label> <div class="col-9"> @Html.DropDownListFor(m => m.Vehicles.VehicleTypeId, Model.VehicleTypeList, "-Select Status", new { @class = "form-control" }) <span asp-validation-for="Vehicles.VehicleStatusId" class="text-danger"></span> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="form-group row"> <label asp-for="Vehicles.Comment" class="control-label col-3 col-form-label" style="width: 12.3%; flex: 0 0 12.499%;max-width: 12.499%;">Comment</label> <div class="col-9" style="width:87.7%;"> <textarea asp-for="Vehicles.Comment" class="form-control"></textarea> </div> </div> </div> </div> <div> </div> <div class="form-group row"> <div class="col-6 offset-4"> @if (Model.Vehicles.Id != 0 ) { <partial name="_EditAndBackToListButton" model="Model.Vehicles.Id" /> } else { <partial name="_CreateAndBackToListButton" /> } </div> </div> </form>All-Star
56074 Points
14565 Posts
Re: please can you help to fix my bootstrap form resize problem
Jun 15, 2020 03:14 PM|bruce (sqlwork.com)|LINK
You didn’t leave a right margin for the scroll bar and set overflow x to hidden.
Member
380 Points
116 Posts
Re: please can you help to fix my bootstrap form resize problem
Jun 16, 2020 07:43 AM|XuDong Peng|LINK
Hi, polachan
According to your description, whether the scroll bar that appears due to zooming the page will interfere with other controls on the page.
If this is the case, I suggest you could consider setting the width of each line in the form.
Just like this:
<style> .row { width: 90%; } </style>More details, you could refer Responsive Web Design Images.
Best regards,
Xudong Peng