How to make your input text within a form have normal size for title field?

Question

0.00/5 (No votes)

See more:

Hi Team

I am creating a web form using asp.net mvc and using bootstrap input-group mb-3. But the size to allow edit for Title is too big and want way that fits it to be normal. Below is my logic of my form, but i need some adjustment, please assist me to achieve this better.

What I have tried:

C#

<pre>    <div class="register-box">
               <div class="register-logo">

               </div>
           </div>
           <div class="card">
               <div class="card-body register-card-body">
                   <center>
                       <img src="~/Images/eNtsa.png" />
                   </center>
                   <center>
                       <p>Training Course Registration:Motion MasterClass</p>
                   </center>

                   @using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { @role = "form" }))
                   {
                       @Html.AntiForgeryToken()
                       <div class="input-group-mb-2">
                           @Html.TextBoxFor(m=>m.Title, new {@class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required"})
                               <div class="input-group-text">
                                   
                               </div>
                           
                       </div>
                   }

               </div>
           </div>

Posted 15-Mar-20 21:14pm

gcogco10

Updated 15-Mar-20 22:00pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

gcogco10 · Answer 1 · 2020-03-15T22:01:00

Hi Team

Maybe if my question sounded so unclear, my aim was to get the form to be on the center including the text input of the form. See my logic in doing this below.

@using eNtsaRegistrationTraining.Models
@model EditTrainingRegFormViewModel

@{
    ViewBag.Ttile = "Dashboard";
    Layout = "~/Views/Shared/_HomeLayout.cshtml";
}
<center>
    <div class="register-box ">
        <div class="register-logo">

        </div>

        <div class="card">
            <div class="card-body register-card-body">
                <center>
                    <img src="~/Images/eNtsa.png" />
                </center>
                <center>
                    <p>Training Course Registration:Motion MasterClass</p>
                </center>

                @using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { @role = "form" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="input-group mb-3">
                        @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
                        <div class="input-group-append">
                            <div class="input-group-text">

                            </div>
                        </div>

                    </div>
                }

            </div>
        </div>
</center>
           </div>