HTMl layout in MVC 5 Razor Page using bootstrap css not showing the way I want it to

Question

I am having a great deal of trouble trying to get things to line up correctly and be presented in the same row. I am using MVC 5 razor pages with HTML and Bootstrap.css file. I have been fiddling with it for a few days now making limited progress from where I began. I will post anything else that is needed in order to help me figure this out - there are more divisions in the table - but I wanted to be as brief as possible.

Here is the screen shots of what I do not want and what I am trying to achieve:

Here is my markup code:

    <table style="width: 1562px; height: 836px;" cellpadding="1"; cellspacing="0"; border="1"; >

        <caption class = "control-label col-md-2", style = "display:inline; white-space:nowrap">
            @Html.DisplayFor(model => model.Title)<br>
        </caption>
       <tbody>
            <tr>

                @*SECTION TITLE MODIFIED .. CATEGORY*@
                <td colspan="1" rowspan="4" style="vertical-align: middle; width: 244px; margin-left:4px" class="form-horizontal" >
                    <br>
                    <ul style="color: blue; list-style-type: none; list-style-image: none; list-style-position: outside; width: 260px;" class="form-horizontal">
    <li>

        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

    </li>
    <li>

        @Html.LabelFor(model => model.PublishDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.PublishDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PublishDate, "", new { @class = "text-danger" })


    </li>
    <li style="display:inline-block; width:auto">

        <div class="form-horizontal">
            @Html.LabelFor(model => model.ModifiedDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
            <div  style="width:50%">
                @Html.EditorFor(model => model.ModifiedDate, new { htmlAttributes = new { @class = "form-control" , style= "width:50%" } })
                @Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger", style = "width:50%" })
            </div>


        </div>
</li>
    <li>  <p style="display:inline-block">

        <div class="form-horizontal" id="isActive">
    @Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-1" })
</div>
    <div class="checkbox" style="align-items:flex-end;">
        @Html.EditorFor(model => model.IsActive)
        @Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })
    </div>

</p> 

        <br style="line-height:20px" />
</li>

    <li> <p>

             <div class="form-horizontal" id="ddlCategoryGroup" style="display:inline-block;white-space:nowrap;">
                 &nbsp; 
                 @Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
</div>
                 <br style="line-height:25px;" />
<p>
        <div class="col-md-10" id="ddlCategory">
            &nbsp;   
            @Html.DropDownList("CategoryId", null, htmlAttributes:
                                                 new { @class = "form-control", style = "font-family:'Franklin Gothic Medium', 'ArialNarrow', Arial, sans-serif; font-size:1.2EM; width:auto; display:inline; white-space:nowrap" })
            &nbsp;    
            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
        </div>
            </p><br/>

        <p style="display:inline-block">
            <div>
                &nbsp;&nbsp;&nbsp;
                @Ajax.ActionLink("New", "Create", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Ajax.ActionLink("Edit", "Edit", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Html.ActionLink("Delete", "Delete", new { id = @Model.CategoryId }, new { htmlAttributes = new { @class = "control-label col-md-2" } })

            </div>
        </p>

</p>
</li>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>

Since you are using bootstrap you can take advantage of the grids. I think that there is no need for the table, paragraphs, list tags in the form. also before using class col-xx-xx use a div with class row — Bosco
– Bosco, Commented Sep 14, 2019 at 22:01
@Bosco I am very new to bootstrap and my css is limited - do you have a small example - just enough that I can modify, work with and fiddle with to get an understanding of what I need to do ? — Ken
– Ken, Commented Sep 14, 2019 at 23:57

Frankofoedu · Accepted Answer · 2019-09-16 13:44:42Z

1

For the "published on" and "last modified" input fields you can try using the flex classes in bootstrap.

<div class="d-flex">
 <input type="text" />
 <button><i class="fa fa-calendar"></i></button>
</div>

1.bootstrap doc flex

2.Here is a cheat sheet for flex boxes

answered Sep 16, 2019 at 13:44

Frankofoedu

3953 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdul Hannan · Accepted Answer · 2019-09-15 01:51:34Z

0

Instead of using tables and List elements for designing I would prefer to use bootstrap classes and div elements as they will give you more control on what you are doing. Take a look at the following code.

First make a parent div with class form-horizontal then for each input make a div with class form-group

<div class="form-horizontal">
    <h4>Write a Suitable title for your Form</h4>
    <hr />
       <div class="form-group"> @*Create this div for each form input element*@
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-6"> @*Based on your requirement you can change the col-md-3 value any where from 1 to 10*@

                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

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

So as you noticed

for complete form we are having a div parent class form-horizontal
for each input element we will have a form-group div class
within each form-group we will have 2 elements label and a div with class col-md-6(or whatever length you prefer) containing the main input element(textbox, dropdown, checkbox etc)

So stop using li Elements and replace them with div with class form-group will sort many issues for you.

answered Sep 15, 2019 at 1:51

Abdul Hannan

4241 gold badge7 silver badges20 bronze badges

1 Comment

Ken Over a year ago

Originally your code the designer created for me; many examples too; but it does not work,Elements are misplaced, they run to the next line or on top of each other. My example is in one <td> and it gets all out of whack. So when I started using the <li> I was able to keep some things together. I have 3 columns - this item group is on the left, TinyMCE in the middle (spans entire rows), and a list element in the third column -spans 4 rows. Below Example group another <tr> with a TinyMCE editor in it as well. <tr><td row span=6 >My Example group</td><td></td><td></td></tr>

Collectives™ on Stack Overflow

HTMl layout in MVC 5 Razor Page using bootstrap css not showing the way I want it to

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related