locked
In registration screen how can I show Isauthorised column just beside of the label RRS feed

  • Question

  • User-1355965324 posted

    How can I show the IsAuthorised checkbox just close to the of its label

    <div class="row">
        <div class="col-md-4">
            <form asp-route-returnUrl="@Model.ReturnUrl" method="post">
                <h4>Create a new account.</h4>
                <hr />
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Input.Name"></label>
                    <input asp-for="Input.Name" class="form-control" />
                    <span asp-validation-for="Input.Name" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.StreetAddress"></label>
                    <input asp-for="Input.StreetAddress" class="form-control" />
                    <span asp-validation-for="Input.StreetAddress" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.City"></label>
                    <input asp-for="Input.City" class="form-control" />
                    <span asp-validation-for="Input.City" class="text-danger"></span>
                </div>
    
                @*<div class="form-group">
                    <label asp-for="Input.State"></label>
                    <input asp-for="Input.State" class="form-control" />
                    <span asp-validation-for="Input.State" class="text-danger"></span>
                </div>*@
    
                <div class="form-group">
                   
                    <label asp-for="Input.PostalCode"></label>
                    <input asp-for="Input.PostalCode" class="form-control" />
                    <span asp-validation-for="Input.PostalCode" class="text-danger"></span>
                </div>
    
                <div class="form-group">
                    <div class="col-4">
                        <label asp-for="Input.IsAuthorised"> Authorised</label>
                        <input type="checkbox" asp-for="Input.IsAuthorised" class="form-control" />
                    </div>
                    @*<div class="col-4">
                        <input type="checkbox" asp-for="Input.IsAuthorised" class="form-control" />
                    </div>*@
    
                    
    
                </div>
                <div class="form-group">
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="form-control" />
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.Password"></label>
                    <input asp-for="Input.Password" class="form-control" />
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.ConfirmPassword"></label>
                    <input asp-for="Input.ConfirmPassword" class="form-control" />
                    <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
                </div>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>
        </div>
        <div class="col-md-6 col-md-offset-2">
            <section>
                <h4>Use another service to register.</h4>
                <hr />
                @{
                    if ((Model.ExternalLogins?.Count ?? 0) == 0)
                    {
                        <div>
                            <p>
                                There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
                                for details on setting up this ASP.NET application to support logging in via external services.
                            </p>
                        </div>
                    }
                    else
                    {
                        <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                            <div>
                                <p>
                                    @foreach (var provider in Model.ExternalLogins)
                                    {
                                        <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                                    }
                                </p>
                            </div>
                        </form>
                    }
                }
            </section>
        </div>
    </div>

    Thursday, June 4, 2020 5:27 PM

All replies

  • User-474980206 posted

    just read the docs:

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">
        Default checkbox
      </label>
    </div>

    Thursday, June 4, 2020 8:47 PM
  • User-1955300613 posted

    Hi,polachan

    You can try this form

    <div class="col-4">
        <label for="checkid" style="word-wrap:break-word">
            <input id="checkid" asp-for="ID" type="checkbox" value="test" />Authorised
        </label>
    </div>

    or you can also custom the <div class> by creating a new .css file to redefine it (remember to put the newest link below the other links ):

        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/your new file.css" />

    Best regards,

    Tsaisoul.

    Friday, June 5, 2020 2:43 AM
  • User-17257777 posted

    Hi polachan,

    You can go through the document of bootstrap, It provides a good layout for each control.

    https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

    Best Regards,

    Jiadong Meng

    Tuesday, June 9, 2020 9:21 AM