Trouble w/ navbar for Technical documentation

Trouble w/ Technical Doc navbar

Keep getting issue that reads:

On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

Googled this about 50 times now, and no adjustments seem to work. Changed height, removed margins, but nothing. I’ve tested the page to see if the navbar moves at all,(even used dev tools to check mobile devices) but not as far as I can see. Any ideas what I’m doing wrong?

<!DOCTYPE html> 
<html lang="en">
    <head>
        <title>
            Technical Documentation
        </title>

        <style>

                body {
                    margin: 0;
                }

                #navbar {
                    position: fixed;
                }
            
                #nav-list {

                    position: fixed;
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    width: 25vw;
                    background-color: navy;
                    
                    height: 100%;

                }



    
                .nav-item, a {
                    display: block;
                    font-size: 1em;
                    padding: 10px;
                    
                    
                }


    
                a,h1 {
                    color: yellowgreen;
                }
    
                a:visited {
                    color: yellow;
                }
    
                #main-doc,footer {
                    margin-left: 25vw;
                    padding-left: 3em;
                    padding-right: 3em;
                    font-size: 2em;
                    line-height: 2em;
                }
            



            @media screen and (max-width: 500px) {
                #navbar {
                    width: 20%;
                    float: left;
                    font-size: smaller;
                }

                .nav-item {
                    font-size: smaller;
                }

                main,footer {
                    padding-right: 6em;
                    margin-right: 6em;
                    padding-left: 2em;
                    
                }

                h1{
                    font-size: smaller;
                }
            }
        </style>
    </head>
    <body>
        <nav id="navbar">
            <header>
                <h1>
                    Create An Angular Application
                </h1>
            </header>
            <ul id="nav-list">
                <li class="nav-item">
                    <a 
                    class="nav-link"
                    href="#Prerequisites">
                        Prerequisites
                    </a>
                </li>
                <li class="nav-item">
                    <a 
                    class="nav-link"
                    href="#Example_application_start">
                        Example Application Start
                    </a>
                </li>
                <li class="nav-item">
                    <a 
                    class="nav-link"
                    href="#Create_the_product_list">
                        Create the product list
                    </a>
                </li>
                <li class="nav-item">
                    <a 
                    class="nav-link"
                    href="#Pass_data_to_a_child_component">
                        Pass data to a child component
                    </a>
                </li>
                <li class="nav-item">
                    <a 
                    class="nav-link"
                    href="#Pass_data_to_a_parent_component">
                        Pass data to a parent component
                    </a>
                </li>
            </ul>
        </nav>
        <main id="main-doc">
            
            <section 
            id="Prerequisites" 
            class="main-section">
                <header>
                    <h2>Prerequisites</h2>
                </header>
                <p>This documentation discusses creating an Angular application.</p>
                <p>
                    To get the most out of this tutorial you should already have a basic understanding of the following:
                </p>
                    <ul>
                        <li>HTML</li>
                        <li>JavaScript</li>
                        <li>TypeScript</li>
                    </ul>

                <p>
                    This guide demonstrates building an application with the following components:
                </p>
                    <ul>
                        <li>
                            <code class="selector">app-root</code> - the first component to load and the container for the other components
                        </li>
                        <li>
                            <code class="selector">app-top-bar</code> - the store name and checkout button
                        </li>
                        <li>
                            <code class="selector">app-product-list</code> - the product list
                        </li>
                        <li>
                            <code class="selector">app-product-alerts</code> - a component that contains the application's alerts
                        </li>
                    </ul>


                
            </section>
            <section 
            id="Example_application_start" 
            class="main-section">
                <header>
                    <h2>Example application start</h2>
                </header>
                <p>
                    You build Angular applications with components. Components define areas of responsibility in the UI that let you reuse sets of UI functionality.
                </p>
                    <ul >
                        <li class="list_header">
                            A component consists of three things:
                        </li>
                        <li>
                            <strong>A<em> component class</em></strong> that handles data and functionality
                        </li>
                        <li>
                            <strong>An<em> HTML template</em></strong> that determines the UI
                        </li>
                        <li>
                            <strong><em>Component-specific styles</em></strong> that define the look and feel
                        </li>
                    </ul>

            </section>
            <section 
            id="Create_the_product_list" 
            class="main-section">
                <header>
                    <h2>Create the product list</h2>
                </header>
                <p>
                    In this section, you'll update the application to display a list of products. You'll use predefined product data from the products.ts file and methods from the <code>product-list.component.ts</code> file. This section guides you through editing the HTML, also known as the template.
                </p>
                <ol>
                    <li>
                        In the <code>product-list</code> folder, open the template file <code>product-list.component.html</code>.
                    </li>
                    <li>Add an <code class="directive">*ngFor</code> structural directive on a <code class="element">div</code>, as follows:
                        <br>
                        With <code class="directive">*ngFor</code>, the <code class="element">div</code> repeats for each product in the list. Structural directives shape or reshape the DOM's structure, by adding, removing, and manipulating elements. For more information about structural directives, see <a href="#">Structural directives</a>.
                    </li>
                    <li>
                        Inside the <code class="element">div</code>, add an <code class="element">h3</code> and <code class="statement">{{ product.name }}</code>. The <code class="statement">{{ product.name }}</code> statement is an example of Angular's interpolation syntax. Interpolation <code class="syntax">{{ }}</code> lets you render the property value as text.
                    </li>
                    <li class="list_header">
                        The preview pane updates to display the name of each product in the list.
                    </li>
                    <li>
                        To make each product name a link to product details, add the <code class="element">a</code> element around <code class="statement">{{ product.name }}</code>.
                    </li>
                    <li>
                        Set the title to be the product's name by using the property binding <code class="syntax">[ ]</code> syntax, as follows:
                    </li>
                    <li>
                        In the preview pane, hover over a product name to see the bound name property value, which is the product name plus the word "details". Property binding <code class="syntax">[ ]</code> lets you use the property value in a template expression.
                    </li>
                    <li>
                        Add the product descriptions. On a <code class="element">p</code> element, use an <code class="directive">*ngIf</code> directive so that Angular only creates the <code class="element">p</code> element if the current product has a description. The application now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Angular doesn't create the <code class="element">p</code> element because the product's description property is empty.
                    </li>
                    <li>
                        Add a button so users can share a product. Bind the button's click event to the <code class="method">share()</code> method in <code>product-list.component.ts</code>. Event binding uses a set of parentheses, <code class="syntax">( )</code>, around the event, as in the <code class="event">(click)</code> event on the <code class="element">button</code> element.
                    </li>
                </ol>
                <ul>
                    <li>
                        Each product now has a <strong>Share</strong> button.
                    </li>
                    <li>
                        Clicking the <strong>Share</strong> button triggers an alert that states, "The product has been shared!".
                    </li>
                    <li>
                        In editing the template, you have explored some of the most popular features of Angular templates. For more information, see <a href="#">Introduction to components and templates</a>.
                    </li>
                </ul>
                

            </section>
            <section 
            id="Pass_data_to_a_child_component" 
            class="main-section">
                <header>
                    <h2>Pass data to a child component</h2>
                </header>
                <p>
                    Currently, the product list displays the name and description of each product. The <code class="component-name">ProductListComponent</code> also defines a products property that contains imported data for each product from the products array in <code>products.ts</code>.
                </p>
                <p>
                    The next step is to create a new alert feature that uses product data from the <code class="component-name">ProductListComponent</code>. The alert checks the product's price, and, if the price is greater than $700, displays a <strong>Notify Me</strong> button that lets users sign up for notifications when the product goes on sale.
                </p>
                <p>
                    This section walks you through creating a child component, <code class="component-name">ProductAlertsComponent</code> that can receive data from its parent component, <code class="component-name">ProductListComponent</code>.
                </p>
                <ol>
                    <li>
                        Click on the plus sign above the current terminal to create a new terminal to run the command to generate the component.
                    </li>
                    <li>
                        In the new terminal, generate a new component named <code>product-alerts</code> by running the following command: 
                        
                        <code class="command">ng generate component product-alerts</code>
                        
                        The generator creates starter files for the three parts of the component:
                        <ul>
                            <li>
                                <code>product-alerts.component.ts</code>
                            </li>
                            <li>
                                <code>product-alerts.component.html</code>
                            </li>
                            <li>
                                <code>product-alerts.component.css</code>
                            </li>
                        
                        </ul>
                    </li>
                    <li>
                        Open <code>product-alerts.component.ts</code>. The <code class="decorator">@Component()</code> decorator indicates that the following class is a component. <code class="decorator">@Component()</code> also provides metadata about the component, including its selector, templates, and styles.
                    </li>
                    <li class="list_header">
                        Key features in the <code class="decorator">@Component()</code> are as follows:
                        <ul>
                            <li>
                                The <code class="selector">selector</code>, <code class="selector">app-product-alerts</code>, identifies the component. By convention, Angular component selectors begin with the prefix <code class="selector">app-</code>, followed by the component name.
                            </li>
                            <li>
                                The template and style filenames reference the component's HTML and CSS
                            </li>
                            <li>
                                The <code class="decorator">@Component()</code> definition also exports the class, <code class="component-name">ProductAlertsComponent</code>, which handles functionality for the component.
                            </li>
                        </ul>
                    </li>
                    <li>
                        To set up <code class="component-name">ProductAlertsComponent</code> to receive product data, first import <em><strong>Input</strong></em> from <code class="import">@angular/core</code>.
                    </li>
                    <li>
                        In the <code>ProductAlertsComponent</code> class definition, define a property named product with an <code class="decorator">@Input()</code> decorator. The <code class="decorator">@Input()</code> decorator indicates that the property value passes in from the component's parent, <code class="component-name">ProductListComponent</code>.
                    </li>
                    <li>
                        Open <code>product-alerts.component.html</code> and replace the placeholder paragraph with a <strong>Notify Me</strong> button that appears if the product price is over $700.
                    </li>
                    <li>
                        The generator automatically added the <code class="component-name">ProductAlertsComponent</code> to the <code class="module">AppModule</code> to make it available to other components in the application.
                    </li>
                    <li>
                        Finally, to display <code class="component-name">ProductAlertsComponent</code> as a child of <code class="component-name">ProductListComponent</code>, add the <code class="selector">app-product-alerts</code> element to <code>product-list.component.html</code>. Pass the current product as input to the component using property binding.
                    </li>
                </ol>
                <ul>
                    <li>
                        The new product alert component takes a product as input from the product list. With that input, it shows or hides the <strong>Notify Me</strong> button, based on the price of the product. The Phone XL price is over $700, so the <strong>Notify Me</strong> button appears on that product.
                    </li>
                </ul>
            </section>
            <section 
            id="Pass_data_to_a_parent_component" 
            class="main-section">
                <header>
                    <h2>Pass data to a parent component</h2>
                </header>
                <p>
                    To make the <strong>Notify Me</strong> button work, the child component needs to notify and pass the data to the parent component. The <code class="component-name">ProductAlertsComponent</code> needs to emit an event when the user clicks <strong>Notify Me</strong> and the <code class="component-name">ProductListComponent</code> needs to respond to the event. 
                </p>
                <ul>
                    <li>
                        In new components, the Angular Generator includes an empty <code class="constructor">constructor()</code>, the <code class="interface">OnInit</code> interface, and the <code class="method">ngOnInit()</code> method. Since these steps don't use them, the following code examples omit them for brevity.
                    </li>
                </ul>
                    <ol>
                        <li>
                            In <code>product-alerts.component.ts</code>, import <code class="import">Output</code> and <code class="import">EventEmitter</code> from <code class="import">@angular/core</code>.
                        </li>
                        <li>
                            In the component class, define a property named <code class="property">notify</code> with an <code class="decorator">@Output()</code> decorator and an instance of <code class="event">EventEmitter()</code>. Configuring <code class="component-name">ProductAlertsComponent</code> with an <code class="decorator">@Output()</code> allows the <code class="component-name">ProductAlertsComponent</code> to emit an event when the value of the <code class="property">notify</code> property changes.
                        </li>
                        <li>
                            In <code>product-alerts.component.html</code>, update the <strong>Notify Me</strong> button with an event binding to call the <code class="method">notify.emit()</code> method.
                        </li>
                        <li>
                            Define the behavior that happens when the user clicks the button. The parent, <code class="component-name">ProductListComponent</code>—not the <code class="component-name">ProductAlertsComponent</code>—acts when the child raises the event. In <code>product-list.component.ts</code>, define an <code class="method">onNotify()</code> method, similar to the <code class="method">share()</code> method.
                        </li>
                        <li>
                            Update the <code class="compon">ProductListComponent</code> to receive data from the <code class="compon">ProductAlertsComponent</code>. In <code>product-list.component.html</code>, bind <code class="selector">app-product-alerts</code> to the <code class="method">onNotify()</code> method of the product list component. <code class="selector">app-product-alerts</code> is what displays the <strong>Notify Me</strong> button.
                        </li>
                        <li>
                            Click the <strong>Notify Me</strong> button to trigger an alert which reads, "You will be notified when the product goes on sale".
                        </li>
                    </ol>
                    <p>The End!!!!!</p>
            </section>
        </main>
        <footer>
            For more information on communication between components, see <a href="#">Component Interaction</a>.
        </footer>
    </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

@KingOcto1005 ,

In order to scroll the left side navbar, you should use CSS-property like
overflow-y: auto; (y-axis) and overflow-x: hidden; (x-axis) in <ul> tag of navbar.

Hope it helps

you can give achive this using position fixed , viewport height ,overflow auto , this are just hints

first try out this , if you still don’t get it then you can refer my project .
https://codepen.io/riosanap/pen/RwgmOwv

1 Like

Wow, thank you very much for your help! I’m new to CSS so it’s still tripping me up a little. It does look like I may have run into a bug of sorts though:

When I run the test in my editor with my code you see above, I pass all 16 tests. However, when I run the test from the preview on my profile page, this error is the only thing that I get wrong EVERY TIME. And, no matter what adjustments I make, the message doesn’t change:

“Please run this test in a larger window (before any media queries) : expected 783 to be above 850
AssertionError: Please run this test in a larger window (before any media queries) : expected 783 to be above 850”

Just as a test, I copied your code to my template and ran the tests again, and got THE EXACT SAME ERROR with your code inserted.

So, does the first pass mean that the test IS passed and ready to be turned in?
If so, this project is done. Or does it have to pass in both the editor AND the preview section?

I’m wondering if this is a glitch on FCC’s part by chance? Any idea how to report it?

if you pass 16/16 test which means you have completed your project

and about this looks like your device screen resolution is smaller .
when i see your project , i was able to see that , you have pass all test, so you don’t have to worry.

1 Like

you successfully made your #navbar to always be visible, with position “fixed”, but you havent explicitely made it be positioned on the left half of the screen. To do that, you can use properties like top/left/right/bottom, which can adjust the element, when it has certain type of positioning, like “fixed”. If you were to use left: 0; and position: fixed, it would put the element on the left side of the screen. You dont need to use fixed position for the #nav-list if its part of the #navbar because that element and its content is already positioned accordingly

1 Like

Thank you very much for the clarification!