How to make divs in MVC5 view appear in the whole screen , not just in the center of it[Answered] RSS

14 replies

Last post Oct 30, 2017 05:48 AM by Deepak Panchal

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

ddgg

Member

43 Points

106 Posts

How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 11:15 AM|ddgg|LINK

Im working on this mvc5 view :

@model CMSFC.Models.AspNetUser
 
@{
    ViewBag.Title = " ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<br/>
   
 
 
    @using (Html.BeginForm())
            {
        @Html.AntiForgeryToken()
 
        <div class="container">
            <div class="row">
                <div class="col-md-5" style="border: 0.5px solid  ;background: linear-gradient(to bottom, #0094ff 6%, #0094ff 6%, white 6%);
    box-shadow: 5px 5px 5px #3399ff;border-radius: 5px; width: 400px; height:700px;margin-right:10px">
 
 
 
                    <div class="form-horizontal">
                        <h4 style="text-align:center; background:#white;color:white;border-radius:5px;margin:5px;padding:15px;">AspNetUser</h4>
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            <div>
                                @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.EmailConfirmed)
                                        @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.PhoneNumberConfirmed)
                                    @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
 
 
 
 
 
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-primary" id="btnSubmit">Create </button>
 
                            </div>
                        </div>
 
 
 
 
 
 
                    </div>
 
                </div>
 
                <div class="col-md-7">
                    <div class="row">
 
 
                        <div class="col-md-12" style="border: 0.5px solid  ;background: linear-gradient(to bottom, #0094ff 14%, #0094ff 6%, white 6%);
    box-shadow: 5px 5px 5px #3399ff;border-radius: 5px; width: 400px; height:300px;margin-bottom:5px">
 
                            <h4 style="text-align:center; background:#white;color:white;border-radius:5px;margin:5px;padding:15px;">AspNetUser</h4>
 
 
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.TwoFactorEnabled)
                                        @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                    </div>
                    <div class="row">
 
 
 
 
                        <div class="col-md-12" style="border: 0.5px solid  ;background: linear-gradient(to bottom, #0094ff 11%, #0094ff 6%, white 6%);
    box-shadow: 5px 5px 5px #3399ff;border-radius: 5px; width: 400px; height:400px;">
                            <h4 style="text-align:center; background:#white;color:white;border-radius:5px;margin:5px;padding:15px;">AspNetUser</h4>
                            <div class="form-group">
                                @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.LockoutEnabled)
                                        @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" })
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
 
 
 
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

The problem here is that these divs appear in the center of the screen , i want them to be wider. But when i change the width from 400px to 500 , they dont stay inline anymore , but 2 smaller divs go down . Can anyone help me with that , i just want to be how they are , but wider in the screen.

- Reply
kipo
Star

10979 Points

2850 Posts
Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:00 PM|kipo|LINK
Remove class for parent div. So, replace this:
```
<div class="container">
```
with this:
```
<div>
```
- Reply
ddgg
Member

43 Points

106 Posts
Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:07 PM|ddgg|LINK
I removed the container class and changed the classes from md-5 and md-7 to
```
<div class="col-md-6"> . It looks fine now , but labels and textboxes are still one on one.
```
- Reply
kipo
Star

10979 Points

2850 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:13 PM|kipo|LINK

What exactly do you mean by "one on one"?
- Reply
ddgg
Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:14 PM|ddgg|LINK

They interfere with each other , i mean the textbox is over label
- Reply
kipo
Star

10979 Points

2850 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:18 PM|kipo|LINK

Can you post screenshot?
- Reply
ddgg
Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:22 PM|ddgg|LINK

I inserted the picture , but i dont know if u can see it now
- Reply
kipo
Star

10979 Points

2850 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:27 PM|kipo|LINK

Where did you insert it, I don't see anything?
- Reply
ddgg
Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:31 PM|ddgg|LINK
- Reply
ddgg
Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:32 PM|ddgg|LINK

i really dont know why the picture wont show up , nevermind .. i respekt all ur help. regards.
- Reply
kipo
Star

10979 Points

2850 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:38 PM|kipo|LINK

I don't see anything again. You will have to upload image to some hosting (you can use http://tinypic.com/) and then click on marked icon and insert URL of the image:
- Reply
ddgg
Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 26, 2017 12:42 PM|ddgg|LINK

Okay , here is the link:

http://tinypic.com/view.php?pic=20k6qz4&s=9#.WfHX0luCwdU

http://i68.tinypic.com/20k6qz4.png
- Reply
Deepak Panch...
Contributor

2990 Points

1210 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 27, 2017 06:06 AM|Deepak Panchal|LINK

Hi ddgg,

I can see in your code that you are using class for the div's which refer to the css class.

and you also applied the inline line css.

so this may create conflict here and controls get overlap each other.

so try to remove the inline css and if you want to modify the css then try to modify the css classes.

so it not create any conflict and controls display properly.

Regards

Deepak

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

ddgg

Member

43 Points

106 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 27, 2017 02:20 PM|ddgg|LINK

these 3 divs arent responsive , i mean they are stick to each others and positioned in the center of the screen , what i want is the right div to be in the whole right size of the screen , and other two left divs to be in the other left side of the screen and to have to spaces between 5px or something else . Thank you in advanced .

@model CMSFC.Models.AspNetUser
 
@{
    ViewBag.Title = " ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<br />
 
 
 
 
 
<style>
 
   
    #x:hover {
        padding: 15px;
         border: 1px solid #6699ff;
    border-bottom-width: 2px;
    background-color: transparent;
}
 
.col-md-6.active:hover {
      box-shadow: 2px 2px 2px  2px rgba(4,4,4,.4) !important;
}
 
 
 
</style>
 
 
 
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
 
        <div>
            <div class="row">
 
                <div class="col-md-6 active" style="border: 0.5px solid  ;box-shadow: 5px  5px 5px #99ccff;  border-radius: 5px; 
 width: 50%; height:700px;margin-right:10px;float:left;">
 
 
                    <div class="form-horizontal">
                        <h4 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h4>
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-4 "})
 
 
                            <div class="col-md-6">
 
                                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { id = "x", @class = "form-control" } })
 
 
                                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
 
 
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            <div>
                                @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.EmailConfirmed)
                                        @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>
 
 
 
 
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>
 
                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-5" })
                            <div class="col-md-5">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.PhoneNumberConfirmed)
                                    @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
 
 
 
 
                    </div>
 
                </div>
 
 
 
 
                <div>
                    <div class="row">
 
 
                        <div class="col-md-6 active" style="border: 0.5px solid  ;
    box-shadow: 5px  5px 5px  #99ccff;border-radius: 5px; width: 50%; height:300px;margin-top:-700px;margin-bottom:10px;float:right ;">
 
                            <h4 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h4>
 
                            <hr />
 
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.TwoFactorEnabled)
                                        @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                    </div>
                    <div class="row">
 
 
 
 
                        <div class="col-md-6 active" style="border: 0.5px solid  ;margin-top:-393px;
    box-shadow: 5px 5px 5px  #99ccff;border-radius: 5px; width: 50%; height:400px;float:right;">
                            <h4 style="text-align:center; border-radius:5px;margin:5px;padding:15px; color:black">Title</h4>
                            <hr />
 
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.LockoutEnabled)
                                        @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" })
                                </div>
                            </div>
 
                            <div class="form-group">
                                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
 
                                    @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                    &nbsp;
                                    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
 
 
 
                    </div>
                </div>
 
 
                <div class="btn-toolbar" style="float:left">
                    <br />
                    <button type="submit" class="btn btn-primary" id="btnSubmit">Create </button>
 
 
                    <button type="button" class="btn">Basic</button>
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
 
                </div>
 
 
 
 
            </div>
 
 
        </div>
 
    }

- Reply
Deepak Panch...
Contributor

2990 Points

1210 Posts

Re: How to make divs in MVC5 view appear in the whole screen , not just in the center of it

Oct 30, 2017 05:48 AM|Deepak Panchal|LINK

Hi ddgg,

I suggest you to set the position to relative of those div's and try to refer examples in link below will give you further idea.

CSS Layout - The position Property

css position

make sure that you implement the css at one place and it not get conflict with other css.

Regards

Deepak

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›