Ugh check boxes

[CodingtheMatrix]

Hello World! I mean fellow coders.

So I am having a little trouble with my survey-project. the third container is where I am listing all the interests for my survey. I am using labels and check boxes for this step however I am experience a problem getting my check boxes to line up vertically. I would like the check boxes to stay to the right of the labels, but also vertically aligned and a few pixels away from the label while keeping inline with each other.

Any help would be greatly appreciated thanks.

Here is the survey.

mdBpXrB

[a_aramini]

So what you want is something like this?

There are lots of different ways to achieve this depending the layout.

In your HTML…

You have:

<label> </label>
<input>

Try:

<input>
<label> </label>

The CSS relative property positions the element relative to its normal position.
Since the label texts for each input are of different length, the “normal” position of the input following the label with longer text will be different than inputs following labels with shorter text.

Render the inputs first so their normal position will be relative to the boundaries of the container without being shifted by the length of the text. Then you can move them around via CSS using:

left: ± px;
ex:
left: 30px;

Then you can move the labels they same way. Effectively moving the labels as a group and checkboxes as a group, as you are trying to do.

[CodingtheMatrix]

Wow thank you very much that is exactly what I want them to look like.

However, when I put the before the I end up with the check boxes on the left side instead of the right.

I have tried using example left: (x)px; but that didn’t work I am sure I am not understanding something here.

Would you mind showing/telling me what I am missing here. I understand that the input would need to go first to render the check boxes to the

but how to get the check boxes to the right side again?

Thanks so much for helping me I really appreciate your time.

[a_aramini]

For the labels, you might need to use a negative number of px to move them away from the right and more towards the left.

something like:

.interest-label {
 position: relative;
  left: -35px;
}

.interest-input {
  vertical-align: bottom;
  position: relative;
  left: 50px;
}

I don’t know what browser you are using, but Developer Tools (“Ctrl + Shift + K” in Firefox, and I think “Ctrl+Shift + i” in Chrome) and using the inspector tool is very useful for things like this!

[CodingtheMatrix]

I am using firefox browser. Not sure how coder friendly it is but if you got some other suggestions I am all ears.

I used the code you provided in the example with a few tweaks of my own of course and it worked just great. I am not fully understanding why vertical-align bottom is used in this way. Before I posted here I came across this on the web and don’t quite understand why it is needed. I will go back and do some more research on the subject. Thanks again for your replies. You where very helpful to me and this gets me one step closer to finishing this project.

Have a great day!

[a_aramini]

Glad to help…

CSS vertical-align property

I mainly use Firefox as well.

Firefox is fine. Each browser might have it’s own quirks (something to keep in mind, which is why web developers test their designs in different browsers and on mobile, to make sure it is consistent across them).

It’s not as big of a problem as it was in the early days when not all browsers supported various things or didn’t follow some standard for something. Though the situation is a lot better these days than it used to be.

[CodingtheMatrix]

Awesome I will have a look I also use W3schools to help me along.

Through research I have become aware that certain browsers may have their own quirks which you pointed out. Perhaps I should be testing these out across multiple different browsers to see if everything is consistent.

I’m glad for the sake of speed and efficiency we live in a more updated time!

Thanks again your awesome!!!

[a_aramini]

I don’t think you actually need the vertical-align: bottom; there in this case. It all depends on the context you’re working in. You could just move them up or down with

top: (x)px;

or

bottom: (x)px;

I think it was in your original CSS code when I copy/pasted it and I didn’t remove it. If you don’t specify it for either the input or the label classes, they will be in the default alignment, which is vertical-align: baseline;

baseline: The element is aligned with the baseline of the parent. This is default

[CodingtheMatrix]

Yes you are correct! I don’t need the vertical-align: bottom;
I just deleted this code and I don’t notice any changes. I believe baseline being the default is sufficient enough for this. I do wonder though if it would change in a different browser or even version? I will have to test that out.

[a_aramini]

More often than not, you will find that it isn’t the taking away of a property that will change something in a browser that doesn’t support it, but rather when you add a property that a browser doesn’t support, it has no effect. So it appears to work in one browser but not another.

But things like vertical-align are pretty standard and the major browsers support it.

It has more to do with how the browser renders things and if it supports it or not. You run into this more when there is a new version of something with new properties added like if they came out with CSS 5 with new stuff and not all browsers implemented the new stuff yet.

W3 schools lists a table on almost all of their pages with the browser support versions

It’s something to be aware of, but I wouldn’t stress about it for standard properties like this.

When you finish your design, you can always just open it in another browser and check that it looks the same or very closely similar to how you intended it to look. Then you can look into things that aren’t working in a specific browser and why.

Sometimes it’s just related to a bug in how a particular browser renders things, and then you get the “fun” (sarcasm ) journey of trying to find a workaround.

But for most of the standard CSS stuff, this will not be an issue.

[CodingtheMatrix]

I see. I agree, with the standard usage across all browsers I think that keeping things simple should work out best for my project.

I’m not to concerned as this survey form project is to complete a course and won’t be used in any way outside of this code pen, but I am glad to be aware of such things nonetheless and will keep this in mind going forward. Perhaps once I reach the stage of actually doing projects that will have real world implications and impacts I can/will test out the project across varying web browsers.

Thanks again. You really do rock!!! Once I complete this project you will be the first to know. Would be nice to get some feedback on my accomplishments.

[a_aramini]

Sure… ping me when you are finished with the project and I’d be glad to take a look.

So far it looks like it’s coming along nicely and looking good!

BTW, I am not an HTML/CSS expert by any means. I’m an I.T. guy by trade, not a coder…just a code learner like you. But I’m happy to help where I can!

And you might already know about the w3 code validators, but if not, it might be helpful to run your code through the HTML and CSS validators when your project is finished to squash any errors and look into any warnings

W3 Markup Validator
W3 Css Validator

Happy coding!

[CodingtheMatrix]

Wow. No I didn’t know about those validators. I most definitely will run my code through them. Code pen has these tools as well which has helped.

definitely will ping you and glad you like the look and layout!

[a_aramini]

One thing I realized and am not sure how to address (sorry, this is going to be a long reply)…

Since you want the check boxes to be to the right of the labels and are using a flexbox (and I’m assuming eventually a responsive design for mobile/small screens)…

The problem of check box alignment is going to pop up again. It looks good and aligned at a certain veiwport size. But as soon as it flexes/wraps, the boxes will push the labels down a line to accommodate the wrapping. So it re-introduces the label/checkbox alignment issue.

The “standard” way people implement check boxes is checkbox to the left, label to the right.

There might be a way to have the check boxes on the right, have it flex properly and retain alignment, but I personally would not know how to accomplish that. Maybe others on here could help you with that issue, or you could just put the check boxes on the left as most sites do.

(I’ve seen several tutorials dealing with how to keep the alignment with labels and check boxes when using flex, but the boxes are all on the left and labels to the right in the tutorials and examples.

You can also wrap the input with the label tag so that the label becomes the container for the input…

And if you do switch to checkbox on left, label on right, the code would look like this:

<label>
<input type="checkbox" id="checkbox_id" name="checkbox_name" class="checkbox_class">
Label Here</label>

Doing something like this:

<label>Label Here
<input type="checkbox" id="animals" name="interest" class="interest_inputs">
</label>

Would put the label back on the left and recreate the alignment issue you’d be trying to avoid.

For the flex issues, you can wrap each label/input pair in divs like this:

        <div class = "some_class_name">
		<label for="animals" class="interest-label">Animals
		<input type="checkbox" id="animals" name="interest" class="interest-input">
	    </label>
        </div>

        <div class = "some_class_name">
		<label for="animals" class="interest-label">Anime
		<input type="checkbox" id="anime" name="interest" class="interest-input">
        </label>
        </div>

I hope all that made sense. This info is from doing some research and reading a few topics about flex and checkbox alignment in fcc Forums

Need help with elements positioning

How display:flex did not effect the arrangement of labels in form of the given sample in Survey Form Project Challenge

(@lasjorg is a very knowledgeable mod and I think codes content for FCC, so I trust their reply in that post)

If you look at the FCC Survey Form code in Developer Tools Inspector tool, you see that all the labels for checkboxes are flex.

FCC Survey Form

Sorry, I thought it was important to point these things out, as I do not want to lead you astray. Feel free to double check and verify what I am saying. As I said in an earlier reply, I’m not an expert or coder, just a fellow student.

I don’t want to give you wrong info. If anyone else reading this knows a better way to handle these issues, please DO chime in!

Happy Coding!

[CodingtheMatrix]

Yep that makes sense.

So I am guessing it probably has something to do with @media max-length/min-length when resizing the view of the web page and its contents on mobile phones/small screens.

hmmm… this is a good point and I am glad you brought it up. I have noticed some other issues with the survey form on my mobile phone as well. Max-length/min-length might fix some of these issues so I am going to have to make a decision as to what I want to do when/if the problem happens which I can understand by your explanation why this would be happening. I really like the check boxes to the right, but I may have to compensate in this situation.

I am open to the challenge of figuring out how to solve the wrapping/flexing issue on smaller screens/phones. Probably a good tool to add to the arsenal.

A question about putting the labels/inputs in their own <div. Would I have to name all the <div separately or could I group them all under the same name?

Thank you for the links I will most definitely be checking them out. Perhaps I am not so close to finishing my project after all, but that is ok more fun and bigger challenges ahead.

I am a student to just beginning but coding is quite fascinating isn’t it and now with the small screens and figuring out how to get the websites to fit on different screens sizes just adds to the challenge that much more.

Thanks for pointing this all out to me. I will investigate all this much further and share my findings.

As a side note I was playing around with the labels and inputs placing then just like in the examples you provided and sort of figured that all out by accident. Isn’t coding great? All trial and error!!!

Have a great week ahead!

[a_aramini]

@CodingtheMatrix

A question about putting the labels/inputs in their own <div. Would I have to name all the <div separately or could I group them all under the same name?

From what I could tell by looking at the code in the FCC Survey Form, the divs all belong to the same class… that way you can just style them once.

I think the issue is 2 fold…

1. Whether checkboxes are on left or right, there’s the issue of keeping them together so when there is a reflow due to risizing of the browser/viewport window there is no line break between them.

2. And then in the case of check boxes on the right, the additional issue of the varying text lengths throwing off the alignment, as you cannot predict the window viewport size a user will be using (not just mobile… I have a 1920 x 1200 monitor but I don’t usually full screen the browser. If I adjust the browser window size, it reflows at the flex/wrap threshold and ruins the alignment).

So, if possible, I think for a 2 column flex layout with the checkboxes on right, the approach might be to somehow have a smaller container inside the flex container that handles the placement and alignment of the labels and boxes in the second column and then the whole 2nd column just jumps down beneath the first column upon reflow, retaining the alignment of the internal content. But I do not know if that is an acceptable approach or if fixing position of content like that defeats the whole purpose of flexbox.

I took a copy of your code on your pen and was playing with it locally. I almost had something like that implemented and working when I made some stupid change, forgot to backup the styles.css file first and forever lost what was “oh sooo close” to a solution lol.

I am a student to just beginning but coding is quite fascinating isn’t it and now with the small screens and figuring out how to get the websites to fit on different screens sizes just adds to the challenge that much more.

Indeed!

@CodingtheMatrix

Thanks for pointing this all out to me. I will investigate all this much further and share my findings.

Please do, I am very interested in what you find. Part of my approach to learning is helping others with issues like these and seeing if I can, or we can collaboratively solve the issue and we both benefit in knowledge gain. So I don’t see it as a waste of time to work on other peoples issues… I learn something new too in exchange for my time.

As a side note I was playing around with the labels and inputs placing then just like in the examples you provided and sort of figured that all out by accident. Isn’t coding great? All trial and error!!!

Hills and valleys, conquers and defeats… totally agree!

You have a great weekend too!

[CodingtheMatrix]

Thank you for answering my question. I am glad that I don’t have to do that as that would just add unnecessarily long code to CSS whew.

I could definitely see why the check boxes would become unaligned at certain view points. My approach was to finish the project then once completed on browser jump into the @media portion to fix the viewpoint problem on small screens. Not sure if that is the best way to approach this. My thinking is that I could then see the finished project on the web and my phone and make the necessary changes/fixes then.

I like your thinking about the approach to adding some kind of fixed container that at a certain length when the viewpoint changes like on smaller screens the 2nd column would then wrap completely intact under the 1st column. I see this as a viable fix if it is possible.

Hmmm… I could really see how this could become an issue for me down the road.

I am happy you reached out to help and in return I have helped someone too so you inspired me. I am glad to know you don’t think of this as a waste of time as all projects have their own hills and valleys and differ from one project to another so I think it is cool that we can collaborate on this fun little project of mine. This is fun and is pulling me out of my shell and into an uncomfortable zone that is engaging! I think this will help me in my future collaborations when I am working on real world projects at a future job as I am looking to turn this into a career hopefully sometime soon.

Cheers friend!!!

[a_aramini]

Thank you for answering my question. I am glad that I don’t have to do that as that would just add unnecessarily long code to CSS whew

Since I already experimented with that you can just grab this html from this JSFiddle, copy it, paste it into notepad++, notepad, word, whatever and do a search replace on

<div>

to

<div class="whatevernameyouwant" >

and then create the class in your CSS.

Saves you the typing.

(I think you have the class name for some of the labels as “interest-label” and in other places “interest_label”… dash vs underscore… might want to fix that according to the actual name of the label class… another easy fix with a text editor’s Search and Replace feature)

[CodingtheMatrix]

Wow that is great and the code looks great to!

You really have gone above and beyond

Do you find that JSFiddle is better than CodePen? Or does that just come down to personal preference.

I am asking because my next project is a landing page and after that I have the option of creating a real world landing page for someone close to me that runs her own business. I am doing this as a favor to her and in return I will be using the page I create as a project in my business portfolio.

[a_aramini]

@CodingtheMatrix

Do you find that JSFiddle is better than CodePen? Or does that just come down to personal preference.

I found out about it few years ago when I was working through a site (now stale) called Practice Python. They used git and JSFiddle. It is very similar.

A lot of people on FCC use Codepen. Codepen has some nicer features. JSFiddle allows anonymous posts which are saved forever (if you create them without logging in). If you save a new version, it just appends /1/ to the url and that number increments with ever save (2, 3, 4, …) you just have to remember to save or bookmark the link.

If you want the ability to delete fiddles, then you have to create them while logged in.

I find it’s better for quick things that you don’t care about that much to login and create a pen. I have a Codepen, but I can’ t remember the throw away email I used so I can’t do “Forgot Password”. I will have to make a new Codepen acct.

@CodingtheMatrix

I am asking because my next project is a landing page and after that I have the option of creating a real world landing page for someone close to me that runs her own business. I am doing this as a favor to her and in return I will be using the page I create as a project in my business portfolio.

Nice! “Real World” experience is the best! For FCC projects, stick with Codepen. The FCC tests are implented in Codepen (special code you cannot see in the headers without using the browser Dev Tools) so you wouldn’ t be able to run the FCC tests to pass in a JSFiddle.