locked
please can you help to fix my bootstrap form resize problem RRS feed

  • Question

  • User-1355965324 posted

    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

     @Html.DropDownListFor(m => m.Vehicles.VehicleTypeId, Model.VehicleTypeList, "-Select Status",

    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>
     
    
    
    
    
    
    

    Monday, June 15, 2020 1:03 PM

Answers

  • User-474980206 posted

    You didn’t leave a right margin for the scroll bar and set overflow x to hidden. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 15, 2020 3:14 PM
  • User-939850651 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 16, 2020 7:43 AM

All replies

  • User-474980206 posted

    You didn’t leave a right margin for the scroll bar and set overflow x to hidden. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 15, 2020 3:14 PM
  • User-939850651 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 16, 2020 7:43 AM