Wikipedia Viewer Layout

[CoMIYC69]

Hi

I’m trying to clean up my layout but I have two problems
One is for some reason bootstrap is not laying out the document borders, everything is 100% width?
Two I’m wondering if there is a way to put my results from search into individual backgrounds, one for each result.

Build a Wikipedia Viewer

[br3ntor]

You might consider using bootstrap 4 now that it’s out instead of 3 but.

Looks like the bit I’m going to share is the same for 3 and 4 however.

You need to wrap your html in a container class. <div class="container"> ... </div>.
Or <div class="container-fluid"> ... </div> but it sounds like you want the first one.

https://getbootstrap.com/docs/3.3/css/#overview-container

[CoMIYC69]

@camperextraordinaire

Which element are you expecting to see a border on and what color should it be?

@camperextraordinaire

If by background, you mean background images, then I recommend creating an array of different background urls (1 for each result) and then use divs instead of list items and set the background using your x variable as the array index to reference the applicable background. I would suggest making each div a large enough height to show the background.

Sorry I was not clear…
The width of the search input and the results window in yellow and the title all want to be full screen width

For the background right now I have a yellow transparent which I would like to have for each result, not just one big background?

I had the ul element in but I was just trying to modify it to see if that was part of the problem

I’m going to try the Bootstrap 4 and see what I get???

[br3ntor]

To get the yellow transparent container for each item you will have to output the div with the display class inside your for loop.

Don’t forgot to setup your container.

Overview

[CoMIYC69]

@camperextraordinaire

I am still confused. You want both the yellow background container and the search input to be full width or not? If not, then the yellow container is already not full width.

@camperextraordinaire

When you say yellow transparent, what does that look like? Are you using rgb syntax? Just apply that background to a li CSS selector.

I was hoping the Bootstrap would give a nice layout so that the layout was not 100% of the page but it usually works for me and the layouts look great.

I tried Bootstrap 4 but things got worse???

If you do a search on my page then you will see results. I want to put them in individual containers with the yellow transparent background.

[CoMIYC69]

@br3ntor

Don’t forgot to setup your container.

That was it for the layout.
Thanks it worked as I expected.

[br3ntor]

Let me know if you want more hints to achieve this.

You basically need the element that’s responsible for the yellow box (the .display class div), and it’s children (the #output id) to be inside your for loop.

This will make multiple elements with an id though so you should change any id’s in your for loop to classes.

[CoMIYC69]

@br3ntor

This will make multiple elements with an id though so you should change any id’s in your for loop to classes.

O-boy!
I tried changing to classes and the whole document failed?
Now I can’t figure out where I goofed up.
My search isn’t working…got it fixed shew!

[CoMIYC69]

@br3ntor

You basically need the element that’s responsible for the yellow box (the .display class div), and it’s children (the #output id) to be inside your for loop.

Yes the picture is exactly what I’m looking for…I can’t figure out how to manipulate it in js? Took me eight hours to figure out the connection to Wikipedia…but I’ll keep trying…

[br3ntor]

Well if you change to classes it will have to be reflected in both your html and css so they match.

When your doing a big experiment or a big change in your code you could do a number of things to keep what you have working already safe.

1. See how the change effects one element first.
2. Copy the line your going to edit and paste it above or below your code then comment it out.
   That way you can revert to the old line easily.

<!--<div id="dog">-->
<div class="dog">

3. Fork your project and work on the fork if working on codepen or make a backup of files manually if working locally.

The div with your display class is responsible for making that yellow rectangle.

The for loops in your JS spits out your output and you want to spit out a bunch of yellow rectangles you need that html to be appended in your for loop just like th <li> tag is.

I didn’t edit much but try to figure it out before looking:

Spoiler: Codepen link to the edit from the img above.

https://codepen.io/br3ntor/pen/BYVowJ?editors=0010

[CoMIYC69]

@br3ntor

I didn’t edit much but try to figure it out before looking:

I’m stubborn…I’ll try it myself