Why is the alignment of my page titles off?

In my admin component, I have a menu and a header.

https://i.sstatic.net/oGJMR.png

However, when I create a new page like the currency page, the title appears at the bottom instead of the top. Why is that?

I believe there might be an issue with the admin.component.html file.

  <div class="sidebar">
    <div class="logo-details">
      <i class="bx bxl-c-plus-plus"></i>
      <span class="logo_name">Menu</span>
    </div>
    <ul class="nav-links">
      <li>
        <a routerLink="value" class="active">
          <i class="bx bx-grid-alt"></i>
          <span class="links_name">Value</span>
        </a>
      </li>
      <li>
        <a routerLink="currency">
          <i class="bx bx-box"></i>
          <span class="links_name">Currency</span>
        </a>
      </li>
    </ul>
  </div>
  <section class="home-section">
    <nav>
      <div class="sidebar-button">
        <i class="bx bx-menu sidebarBtn"></i>
        <span class="dashboard">Dashboard</span>
      </div>
      <div class="search-box">
        <input type="text" placeholder="Search..." />
        <i class="bx bx-search"></i>
      </div>
      <div class="profile-details">
        <span class="admin_name">Prem Shahi</span>
        <i class="bx bx-chevron-down"></i>
      </div>
    </nav>
  </section>

On the currency.component.html page, I have:

<div class="home-content">
  <h1 style="text-align: center">Currency Page</h1>
</div>

You can view the code here, if you'd like.

Answer №1

Successfully resolved the issue by updating the structure in admin.component.html. The code snippet below showcases the changes made:

<router-outlet>
  <div class="sidebar">
    <div class="logo-details">
      <i class="bx bxl-c-plus-plus"></i>
      <span class="logo_name">Menu</span>
    </div>
    <ul class="nav-links">
      <li>
        <a routerLink="value" class="active">
          <i class="bx bx-grid-alt"></i>
          <span class="links_name">Value</span>
        </a>
      </li>
      <li>
        <a routerLink="currency">
          <i class="bx bx-box"></i>
          <span class="links_name">Currency</span>
        </a>
      </li>
    </ul>
  </div>
  <section class="home-section">
    <nav>
      <div class="sidebar-button">
        <i class="bx bx-menu sidebarBtn"></i>
        <span class="dashboard">Dashboard</span>
      </div>
      <div class="search-box">
        <input type="text" placeholder="Search..." />
        <i class="bx bx-search"></i>
      </div>
      <div class="profile-details">
        <span class="admin_name">Prem Shahi</span>
        <i class="bx bx-chevron-down"></i>
      </div>
    </nav>
    <router-outlet></router-outlet>
  </section>
</router-outlet>

To further enhance, include

<router-outlet></router-outlet>
after the closing </nav> tag. Refer to the provided screenshots for a visual representation of the updated layout: https://i.sstatic.net/mAYoH.png https://i.sstatic.net/D1HxN.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

What is the best way to expand my navigation bar to fill the entire width of my div?

A big shoutout to @seva.rubbo for fixing the issue! Check out the updated code on JSFiddle I recently designed a layout with a fixed width div of width: 900px;. I centered this div, leaving blank spaces on either side. Now, I'm looking to add a navig ...

The browser is unable to display an image file that contains the special character "%" in its name

I have an image file named 'a%1.jpg' that is not appearing in the browser. The code for my image tag is <img src="a%1.jpg" id="Image1" />. Is there a way to properly render the image using escape sequences? ...

Create a stunning wave CSS effect using the :after and :before pseudo-elements

Hey there! I'm currently experimenting with creating a wave effect using CSS, specifically utilizing 'before' and 'after'. However, I've encountered an issue where I can't seem to position my waves correctly at the top a ...

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

Exiting the modal/popup box is currently disabled

I am struggling to figure out why the modal box/pop up is not closing when I click 'x'. It seems completely unresponsive. Check out the JavaScript code below: var kite = document.getElementById("poptext"); var kitetwo = document.getElementById( ...

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

What is the best method for retrieving values from selected radio buttons?

I am trying to retrieve the values of the selected radio buttons with the name is_external example.html <div class="exter_inter"> External <input type="radio" name="is_external" value="1" <?php if(isset($_GET['status']) &&am ...

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

Struggling with creating a unique business card design with CSS

Currently, I am working on designing a business card that features the name and title at the center, with the email and phone number positioned on the extreme left and right sides of the card. Below is the code snippet I have been using: .business-card ...

Utilize jQuery to dynamically update the box-shadow property with inset added

I have a situation similar to this: $('.inset').click(function(){ if($('.inset').is(':checked')){ $('.box-shadow').css('boxShadow','inset'); }else{ $('.box-shadow&ap ...

The drop-down menu keeps flickering instead of remaining open when clicked

I am facing an issue with a dropdown menu in my webpage. The menu is initially hidden, but should become visible when the list element containing it is clicked. I have written JavaScript code to add a class that changes the visibility property to visible u ...

What is the best way to place a single button above a row using the bootstrap btn-group?

I currently have 11 buttons arranged in 3 rows, and I am trying to position one button at the top as a standalone element before the two rows of buttons. However, despite experimenting with various flex-end and content align classes, I have not been succ ...

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

When there is no visible content on the mobile website, it starts scrolling horizontally to the right

Why is the website scrolling to the right when there is no content there? This issue seems to only occur on actual mobile devices when I try to recreate it. Currently in the process of transferring it over, which is why the link appears as it does. Any ...

Uploading pictures to a directory and storing their filenames in a database with the help of PHP

I'm facing a challenge trying to upload 2 files into a folder and save their names and image paths in a database. Below is my HTML code for reference: <input class="field2" type="file" name="file[]" multiple="multiple" /> Here is the PHP code ...

Save hyperlinks in a storage system

I need to store an article in a MongoDB database, and some words within the article should be clickable links leading to other pages. However, when I display the article using an EJS template, the anchor tags I added while writing the article appear as pl ...

The CSS styling for the rows in an Angular Material textarea is unresponsive

I have been working with angular Material design and have implemented a Textarea element. However, I am facing an issue where the height of the Textarea is fixed and cannot be changed. I have tried various solutions without success. How can I adjust the si ...

Unable to conceal tab content upon clicking the identical tab

I recently implemented a tab system with panels that seems to be working well when switching between tabs. However, I'm facing an issue where clicking on the same tab does not hide the corresponding panel and reset the aria attributes as intended. I&a ...