Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Janis Binans
Janis Binans
986 Points

whitespace under checkbox

Hello i have too much whitespace under my checkbox when it's not checked, the divs are not visible but they still take some space. Can you please tell me how to cut this space when the checkbox is not checked?

here are 2 screenshots http://s4.postimg.org/sprwulust/first_screenshot.png

http://s30.postimg.org/4s43f5fqp/2nd_screenshot.png

here is a peace of code <html>```

                           <div  class="col-md-12 ">  
                          <div class="col-md-4">  
                          <dx:ASPxLabel ID="lblWebService" runat="server" />  
                            </div>
                            <div class="col-md-8 cbwmargin1">
                                <dx:ASPxCheckBox ID="chkWSEnabled" runat="server" ClientInstanceName="chkWSEnabled">
                                    <ClientSideEvents CheckedChanged="function(s, e) { SetWebSFieldVisibility(); }" />
                                </dx:ASPxCheckBox>
                            </div>
                            </div>
                            <div class="col-md-12">
                            <div class="col-md-4">
                                <dx:ASPxLabel runat="server" ID="lblLogName" ClientInstanceName="lblLogName">
                                    <ClientSideEvents Init="function(s, e) { SetWebSFieldVisibility(); }" />
                                </dx:ASPxLabel>
                            </div>
                            <div class="col-md-8 cbwmargin1">
                                <dx:ASPxTextBox ID="txWSLoginName" runat="server" ClientInstanceName="txWSLoginName"
                                    Width="50%" CssClass="error-input">
                                    <ClientSideEvents Init="function(s, e) { SetWebSFieldVisibility(); }" />
                                </dx:ASPxTextBox>
                            </div>
                            </div>
                            <div class="col-md-12">
                            <div class="col-md-4">
                                <dx:ASPxLabel ID="lblGlobalPassword" runat="server" ClientInstanceName="lblGlobalPassword">
                                    <ClientSideEvents Init="function(s, e) { SetWebSFieldVisibility(); }" />
                                </dx:ASPxLabel>
                            </div>
                            <div class="col-md-8 cbwmargin1">
                                <dx:ASPxTextBox ID="txWSPassword" runat="server" ClientInstanceName="txWSPassword"
                                    Width="50%" CssClass="error-input">
                                    <ClientSideEvents Init="function(s, e) { SetWebSFieldVisibility(); }" />
                                </dx:ASPxTextBox>
                            </div>
                            </div>

</p>```

Dave Holm
Dave Holm
2,562 Points

You could not have the hidden HTML elements exist at all until the checkbox is checked, and then have javascript create them. It's more work though for sure, and if the boxes are unchecked and you want to remove them then you'd have to delete them all.. hmm not sure that would be the ideal way but it's all that came to mind. I'm just learning myself here.

I'm thinking along the lines of:

var myDiv= document.createElement("div"); var textField = document.createElement("input");

textField.type = "text";

myDiv.class = "someClassName";

myDiv.appendChild(textField);

I hope that gives you some ideas at least. There must be a simpler solution for you though. This would work nice if you don't know now many of these elements you want, but you know exactly what you want to have appear there.. There must be a better way than this. I think it would be easier in PHP do do what you want here, or I just don't know Javascript that well.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Janis,

If I understand it right, you have some form elements that should only appear if you have a checkbox checked?

Can you post the css that's relevant to this portion of the html?

3 Answers

Janis Binans
Janis Binans
986 Points

function SetFieldSpace() { if (!chkWSEnabled.GetValue())

            $('#test').hide();



        else
            $('#test').show();

    }

i figured it out myself using this jQuery function. I can hide id that is under checkbox to prevent it from using too much space. So if anyone have this same problem can use this function.

Janis Binans
Janis Binans
986 Points
Janis Binans
Janis Binans
986 Points

No the elements appear and disappear, but because i have set margin using cbwmargin1 class (adding it to bootstrap column) they don't shrink the whitespace betweeen checkboxes enough. basicly i want to create a Javascript or Jquery that will make Divs under checkbox disappear when not checked something like "display: none;"

Janis Binans
Janis Binans
986 Points
Janis Binans
Janis Binans
986 Points

If anyone have an idea how to get this working it would be very helpful, because i have came across this problem several times.... im just learning to code, especialy Jqeury and Javascript