locked
how can show label and input control in same line . RRS feed

  • Question

  • User-1355965324 posted

    I  using the following side bar layout   and vehicle form to input vehicle details. But the label  and input text is not being showed in same line. how can i bring in same line please help

     https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

    <!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!-- 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="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
        @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;
      }
    }
    

    In my Vehicle entry screen html given below  the  input text is being showed just below the label control. How can I show   the label  and text in same line

    @model Vehicle.Models.Vehicles
    @{
        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 form-group-sm row">
                    <label for="inputName" class="control-label  col-sm-2">Make</label>
                    <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Make" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group form-group-sm row">
                    <label for="inputName" class="control-label col-sm-2">Model</label>
                    <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Model" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group form-group-sm row">
                    <label for="inputName" class="control-label  col-sm-2">Make</label>
                    <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Make" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group form-group-sm row">
                    <label for="inputName" class="control-label col-sm-2">Model</label>
                    <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Model" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
        
    
    
    
    
    

    Saturday, June 13, 2020 11:02 AM

Answers

  • User-1355965324 posted

    Hai yogogo

    I used the followin way using col-form-label it is working fine. Is there any other option to fix this problem other than keeping style for creating seperate div. At the moment after using col-form-label is working fine

    <label for="inputName" class="control-label  col-sm-3 col-form-label">Make</label>

    Many Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2020 6:41 AM

All replies

  • User-2054057000 posted

    You can simply use inline styles like shown below:

    <div style="width: 100%">
        <div style="width: 50%"; float: left>
            <label>Hello</label>
        </div>
        <div style="width: 100%; float: left">
            <input type="text" />
        </div>
    </div>

    Sunday, June 14, 2020 3:53 AM
  • User-1355965324 posted

    Hai yogogo

    I used the followin way using col-form-label it is working fine. Is there any other option to fix this problem other than keeping style for creating seperate div. At the moment after using col-form-label is working fine

    <label for="inputName" class="control-label  col-sm-3 col-form-label">Make</label>

    Many Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2020 6:41 AM