These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Sep 2018
Nerando Johnson
@Nerajno
Sep 20 2018 04:15
I was trying to move the elements in label to the center of the screen even so both labels and the questions are in the center of the screen.
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:34
Anyone can show me a clean way of doing the Masonry effect to my portfolio? Basically it's just a bunch of divs, each with its specific dimensions, but they all form the overall container, with no space between them.
alpox
@alpox
Sep 20 2018 10:42
@Morched23MJ Are they either the same width or height?
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:43
Specific w and h for each
alpox
@alpox
Sep 20 2018 10:43
@Morched23MJ So different for each?
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:43
Yup
alpox
@alpox
Sep 20 2018 10:43
I don't think a perfect masonry will work then
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:43
What would?
alpox
@alpox
Sep 20 2018 10:44
If the elements follow a scheme like that some elements are exactly twice in width or twice in height it would work well
But they somehow have to be able to line up
Either same width or same height for all of them, or proper partials of width or height
@Morched23MJ You can use libraries for this too btw.
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:45
Oh I see. Let's suppose there would exist proper partials of w/h. Would there be a way?
alpox
@alpox
Sep 20 2018 10:45
@Morched23MJ Yes, this library as example
Or if they have all the same width there is a very simple way which I used here: http://wop-info-client.herokuapp.com/
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:46
I see. There is no pure css way? There, they use a jQuery Plugin
alpox
@alpox
Sep 20 2018 10:47
@Morched23MJ If you want to implement it yourself with only css and different size elements, thats going to be a huge task
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:47
Uhm. :l
Alright, I will try with that plugin, thanks!
alpox
@alpox
Sep 20 2018 10:48
np
@Morched23MJ Btw. that plugin is not anymore a jquery plugin (Not necessarily)
@Morched23MJ Check the part: Initialize with Vanilla JavaScript
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:50
Oh. But can I use javascript to call their function masonry({...})?
alpox
@alpox
Sep 20 2018 10:51
@Morched23MJ
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});
From their vanilla javascript example
Morchid Chellali
@Morched23MJ
Sep 20 2018 10:52
Thanks
AJ Brommy
@AJ-Brommy
Sep 20 2018 15:20
@Nerajno I think your issue may be that you are trying to text-align: right on an inline-flex container. i'm not certain tho. it's a shame you didn't do this on codepen so we could play about with the code a bit
@Nerajno vertical-align: right; is invalid there is no such thing. delete that.
AJ Brommy
@AJ-Brommy
Sep 20 2018 15:26
@Nerajno having a play and maybe it is ok to use text-align: right on the inline flex container. tho i'm not really sure why you are using the inline flex. also float: right; on your name-label. i don't see a purpose for that either.
AJ Brommy
@AJ-Brommy
Sep 20 2018 15:31

@Nerajno your biggest issue is probably this, above your .labels styles

.rowTab{
  text-align: center;
  margin-left: auto;
  margin-right:auto
  width:auto 0;
}

you are missing a semi colon after margin-right:auto. This is breaking the css, everything under it is probably not being rendered, there fore your text align right isn't being implemented. I think. but without being able to test it, i'm not certain.

it's possible it only breaks that particular class tho, so then i'd still be unsure lol
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 16:51
Hey everyone
i'm having trouble with the survey form responsive web design project.... specifically aligning the radio buttons and check boxes
Eric Weiss
@eweiss17
Sep 20 2018 16:54
yeah that is a real pain
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 16:56
i started aligning everything starting from the radio buttons using position relative but it's way to much work there has to be an easier way
@eweiss17 are you working on it now or you've already finished it?
Eric Weiss
@eweiss17
Sep 20 2018 16:58
I did it a couple months ago
i remember it being difficult, like in the 'why won't you just do what I say' type of deal
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 16:58
any tips?
Eric Weiss
@eweiss17
Sep 20 2018 16:58
i ended up eventually checking out the source of the example
AJ Brommy
@AJ-Brommy
Sep 20 2018 16:58
read through the code of their version.
Eric Weiss
@eweiss17
Sep 20 2018 16:59
the way it was done there wasn't very pretty
AJ Brommy
@AJ-Brommy
Sep 20 2018 16:59
yea
Eric Weiss
@eweiss17
Sep 20 2018 16:59
this is what mine ended up looking like https://codepen.io/eweiss17/full/vroWEY/
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 17:00
yeah i took a look at it, looked very messy. I'm trying to understand it as well as simplify it. But i guess i have no choice
Ok thanks
Eric Weiss
@eweiss17
Sep 20 2018 17:04
I ended up making the form display table
AJ Brommy
@AJ-Brommy
Sep 20 2018 17:04
I'm not sure if it helps, but I used an unordered list, with each list item containing a label and a radio button/check box, and then floated the button/box to the left. each item being a display block, so they go onto a new line for each.
Eric Weiss
@eweiss17
Sep 20 2018 17:05
and then each section a table row
and each label and input a table cell
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 17:06
yeah i used unordered list as well
maybe that's what i'm missing the float
AJ Brommy
@AJ-Brommy
Sep 20 2018 17:08
can we see what you've got?
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 17:08
sure although it's all over the place
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 17:23
@AJ-Brommy i know there is a lot wrong with it , any comments ?
Eric Weiss
@eweiss17
Sep 20 2018 17:31
try a darker red for the background
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 17:51
the color's are not a big issue at the moment but i'll take it into consideration lol
Prashant Rajoriya
@prashant-rajoriya
Sep 20 2018 18:21

Help! there is no elements in the exit selection on changing categories data.

let updateLegend = legend
                .append("g")
                .attr("transform", "translate(60," + LEGEND_OFFSET + ")")
                .selectAll("g")
                .data(categories);

      updateLegend
        .exit()
        .remove();

Data of categories for switching

["Product Design", "Tabletop Games", "Video Games", "Technology", "Hardware", "Sound", "Gaming Hardware", "Narrative Film", "3D Printing", "Television", "Web", "Wearables", "Food", "Games", "Sculpture", "Apparel", "Art", "Gadgets", "Drinks"]0: "Product Design"1: "Tabletop Games"2: "Video Games"3: "Technology"4: "Hardware"5: "Sound"6: "Gaming Hardware"7: "Narrative Film"8: "3D Printing"9: "Television"10: "Web"11: "Wearables"12: "Food"13: "Games"14: "Sculpture"15: "Apparel"16: "Art"17: "Gadgets"18: "Drinks"],

["Action", "Adventure", "Comedy", "Drama", "Animation", "Family", "Biography"],

["Wii", "DS", "X360", "GB", "PS3", "NES", "PS2", "3DS", "PS4", "SNES", "PS", "N64", "GBA", "XB", "PC", "2600", "PSP", "XOne"]
AJ Brommy
@AJ-Brommy
Sep 20 2018 18:23
@Koshin-Mohamed sorry i got pulled away from the computer... having a look now
Prashant Rajoriya
@prashant-rajoriya
Sep 20 2018 18:24
AJ Brommy
@AJ-Brommy
Sep 20 2018 18:36

@Koshin-Mohamed here is how I fixed it.. i think it does what you are after...

.radio{
  position: relative;
  left: 275px;
  bottom: 65px;
  line-height: 30px;
  width: 55%;
}

.radio label{
  text-align: left;
}

your labels were all 300px wide and aligned to the right. so I added the style at the bottom to show that. this is one way to do it. but you need 2 different label styles that way. one aligned right. and one aligned left. and the left aligned would need to be set for your checkboxes too. I only did radio buttons. anyway hopefully you will be able to see what i did and why and make sense of it and make it fit your needs as you want it :)

newmoon
@newmoon
Sep 20 2018 19:24
This should be as simple as two inline-block elements side by side. One with the explanation text and another with a list of checkboxes.
No need for relative positioning, unless I'm misunderstanding the goal. Here's an example: https://codepen.io/anon/pen/oPmJRJ?editors=1100
@Koshin-Mohamed
Koshin Mohamed
@Koshin-Mohamed
Sep 20 2018 19:49
thanks @AJ-Brommy and @newmoon i'll look into both i'm done for tonight... cheers
Adam Jacobs
@AdziHades
Sep 20 2018 20:09
Hey guys. Anyone able to help with some TamperMonkey stuff on an iFrame?
AJ Brommy
@AJ-Brommy
Sep 20 2018 23:00
I'm not even sure what TamperMonkey is lol
Brad
@bradtaniguchi
Sep 20 2018 23:07
sounds like greesemonkey (extension for firefox to mess with js on a given webpage)