Creating div dynamically with htmlhelpers inside?

Question

I have problem with my MVC app which is shown in the pictures.

So when i click on the one of the checkboxes, script will be set the visible of the div to visible. But this is not good idea because the second div have a empty space above.

First div with <code>htmlhelpers</code> empty space which i dont want

Checkboxes with script insdie:

    <label><input type="checkbox" onclick="biurowyScript();" id="biurowyCheck" />  Pracownik biurowy</label>
            <label><input type="checkbox" onclick="przewodnikScript();" id="przewodnikCheck" style="margin-left: 30px" />   Przewodnik</label>

biurowy div

   <div id="biurowy" style="visibility: hidden">
            <div class="form-group">

                @Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

przewodnik div:

 <div id="przewodnik" style="visibility: hidden">
            <div class="form-group">
                @Html.LabelFor(model => model.Przewodnik.Uprawnienia, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Przewodnik.Uprawnienia, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Przewodnik.Uprawnienia, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

In scripts i only set visible of the divs to visible. But like i said this is not the good idea for this app. So what i can use to fix this ?

When you use visibility the page still creates the space for the element, if you use the display property it will not create the space — M_Griffiths
– M_Griffiths, Commented Jun 21, 2015 at 10:23

Manjar · Accepted Answer · 2015-06-21 10:20:27Z

2

Use display="none" instead of visibility="hidden"

<div id="biurowy" style="display: none">
            <div class="form-group">

                @Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

EDIT:

When you use visibilt=hidden it keeps the space, while using display=none you it does not keep the space. You can show it with jquery the same way, i mean $(item).show()

answered Jun 21, 2015 at 10:20

Manjar

3,2781 gold badge35 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Creating div dynamically with htmlhelpers inside?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related