Trouble with Transcripts

[helvitiis]

I'm attempting to use flex boxes to corral the div boxes containing season & episode numbers to fit into another div (yellow box). I'm having trouble doing this... I want the little div boxes to wrap themselves into the yellow div. This is probably a small thing I missed.

Here is the commit with all of my code: https://github.com/dorothealint/Rick-and-Morty/commit/cd784651f2edcc1741b4c6f364739ff90b9c3ec0

Any tips would be appreciated!

[dorothealint]

@quantum-satire what about 2 columns for each season? They look like they would fit nicely lengthwise that way! (Simple non-code fix because flex-boxes are not my friends yet!)

[ebeshero]

@quantum-satire I'm taking a look now before I turn in for the night...

[ebeshero]

@quantum-satire I just solved the issue with this commit: https://github.com/dorothealint/Rick-and-Morty/commit/7aedd51bcfd61f9e9a62f816b047009d21210bfc

The problem was simply with identifying the correct outermost div element to do the column flexing you need between the list of seasons and the transcript viewer. Once I fixed that, the flexing was fine!

Here's a question: How come your speakers aren't distinguished from the text they're speaking in the transcript view? Do you want to output the speaker names in special spans for styling?

[ebeshero]

So, here's how it looks now:

[helvitiis]

@ebeshero Thank you for looking at the code! But, is there also a way to force the child divs into the parent divs (making two or three rows of columns per each season). I also simply added a plain text version of the Pilot in order to act as a visual placeholder before I tackle that part of the page--I still have yet to run some XSLT over the transcripts to put on the site!

@dorothealint I was planning on having two rows of the scripts! However, I was having trouble wrapping them inside of their parent div in order to have a responsive site design (ie if you resize the page width, the boxes will rearrange themselves to fit within the parent!)

[ebeshero]

@quantum-satire The answer is, YES. Every level of element can be made into a flexbox container, even if it is contained inside another flexbox! The parent divs surrounding the seasons should themselves be set to display:flex;

[ebeshero]

@quantum-satire And you do everything else with those that you would any flex container. Justify content, the works.

[ebeshero]

@quantum-satire I experimented a little with adding display:flex to those items, and I removed the literal height property on your div containing the season buttons. You don't want to use literal height and width display properties in a flex container because they interfere with flexing: that was causing some of the buttons in season three to be hidden. Once I removed that, flexing took over.

I also messed a little with flex numbers so there's an expectation that proportionally some divs take up relatively more space (like 3:2) compared to others. These are the properties set like this: flex:2; or flex:3; or flex:1; set inside children of a flex container: You don't have to use them, and the default is that everything takes up the same amount of space. But if you do set them, you want to put a flex number inside every child of a container. Read more about it here: https://internetingishard.com/html-and-css/flexbox/ (scroll for the phrase "flexible items"). (I still think that is by FAR the best guide to flex boxes I've seen. That tutorial is how I learned them.)

And check out my latest commit with the changes.

[ebeshero]

@quantum-satire @dorothealint Here's how it looks with display:flex properly added to your season divs:

[ebeshero]

In the screen capture, I squished the screen a little so you could see the flex-wrap property kick in. If you widen it, they all line up tidily in rows. @quantum-satire Is this what you were trying for?

[ebeshero]

@quantum-satire @dorothealint Here is the handy JavaScript part of the solution for the last JavaScript-over-SVG exercise, and you can and should use it for connecting the buttons to the transcripts.