Partial View rendering not correctly (ASP.NET MVC)

Question

I have modal dialog opening by click

Modal body is Partial View

Here is code of partial view

<div style="height: 400px;overflow-y: scroll">
    <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
    <input type="text" class="form-control" id="Name" , placeholder="Enter First and Last Name " />
    </div>
    <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
   <input type="text" class="form-control" id="sex" , placeholder="Sex" />
</div>

I call modal in main View like this

<div class="modal fade" id="addPatient" style="z-index: 5" role="dialog" data-backdrop="false">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-body">
            <p style="font-size: 20px;">Appointment successfully created </p>
        </div>
        <div class="modal-footer">
            @Html.Partial("~/Views/PatientDatabase/AddingPatient.cshtml")
        </div>
    </div>

</div>

But my inputs displaying in one row.

Like this

Screen

Where problem can be?

As I understood it must display not in one row.

That depends entirely on the CSS you use to style the inputs, specifically these classes : .form-group, and / or .form-group input — Timothy Groote
– Timothy Groote, Commented Aug 10, 2017 at 7:37
also, the HTML you posted is incomplete, in your partial i am missing a </div> closing tag — Timothy Groote
– Timothy Groote, Commented Aug 10, 2017 at 7:39
@mmushtaq where does that modal-title come from? i don't see it anywhere in OP's code, and making blind assumptions like that is dangerous. — Timothy Groote
– Timothy Groote, Commented Aug 10, 2017 at 7:43
@mmushtaq you can only make assumptions on the part of OP's code you are not seeing. my advise is ; try not to do that, or try to do it as little as possible ; you might be giving out bad advise without knowing it. — Timothy Groote
– Timothy Groote, Commented Aug 10, 2017 at 7:46

Power Star · Accepted Answer · 2017-08-10 07:40:16Z

1

Hope there is float : left in form-group class. So add clear:both in those div's style attribute.

<div style="height: 400px;overflow-y: scroll">
    <div class="form-group" style="clear:both;text-align:center;padding-bottom: 20px; padding-top: 10px;">
    <input type="text" class="form-control" id="Name" , placeholder="Enter First and Last Name " />
    </div>
    <div class="form-group" style="clear:both;text-align:center;padding-bottom: 20px; padding-top: 10px;">
   <input type="text" class="form-control" id="sex" , placeholder="Sex" />
   </div>
</div>

answered Aug 10, 2017 at 7:40

Power Star

1,8942 gold badges16 silver badges30 bronze badges

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

2 Comments

Timothy Groote Over a year ago

don't hope anything. you're a developer, you can make sure you know it.

Power Star Over a year ago

I don't hope anything in mycode boss. If somebody did't give me full code then, I can only hope. :( @TimothyGroote

Collectives™ on Stack Overflow

Partial View rendering not correctly (ASP.NET MVC)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related