Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom.

While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps outlined in this answer to achieve the desired effect. My objective is to replicate the exact outcome described in that reference.

Here are the adjustments I made to the theme:

.app-menu {
  @extend .app-menu;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;

  li:last-of-type {
    margin-top: auto;
  }
}

You can view a functioning example in this fiddle.

It seems that the issue may be related to the menu not utilizing its full height potential.

I would be happy to provide a working snippet, but unfortunately, I struggled to create one using jsfiddle. Local files are not allowed, and it poses an issue with my gist as well as Codepen.

htmlcssflexbox

Answer №1

To transform .app-sidebar into a flexbox layout, add the following CSS properties:

  display: flex; // Enables flexbox layout
  flex-direction: column; // Arranges items in a column direction

This change allows for applying flex styling to its child elements effectively.

After making the sidebar a flexbox, insert the code below within .app-menu:

    flex: 1; // Utilizes all available space within the sidebar

Additionally, eliminate the padding-bottom on .app-menu to ensure that the final item remains positioned at the bottom without any padding.

Answer №2

give this a shot

.application-menu {
    padding-top: 20px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: flex-start;
    flex-direction: column;

If you want the last item to stay at the bottom of the page, try setting the ul's height to 100%

Answer №3

To ensure proper functionality, it is essential to follow the instructions provided in the attached link. However, one crucial aspect that may have been overlooked is setting the height of the ul element to 100%. By adding the CSS rule height: 100%; to the .app-menu class, you can resolve this issue effectively.

For a visual representation, refer to the example below:

https://jsfiddle.net/abc123de/3/

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

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

Can you explain the purpose of the #shadow-root found within elements?

Today I witnessed something out of the ordinary. Take a look at the images attached to this post. Specifically, pay attention to the input[type="text"] labeled as "1" in the screen picture. The CSS styling for it appears as follows: tab ...

htmlgoogle-chromegoogle-chrome-devtools

The HTML checkbox remains unchanged even after the form is submitted

On a button click, I have a form that shows and hides when the close button is clicked. Inside the form, there is an HTML checkbox. When I check the checkbox, then close the form and reopen it by clicking the button again, the checkbox remains checked, whi ...

javascriptjqueryhtmlasp.netcheckbox

Incorporating Copyleaks SDK into Angular: A Seamless Integration

Currently, I'm in the process of implementing the Copyleaks SDK with Angular to conduct plagiarism checks on two text area fields within an HTML form. Within the form, my goal is to incorporate two buttons: one to check for plagiarism on one text area ...

htmlangularplagiarism-detectioncopyleaks-api

Animating a CSS shape with the .animate method

I need help creating a dynamic graphic for my school project using css, jquery, and html. I want to make a rectangle that moves across the screen, but I'm having trouble getting it to work properly. Despite trying different variations of the animate f ...

javascriptjqueryhtmlcss

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

htmlcssmarginvertical-alignmentspacing

Notification window when the page is being loaded

My goal is to have a module or alert box display when my website is opened, and then disappear after 5 minutes. To see an example of what I'm looking for, take a look at this website: On that website, there is a facebook.com box that automatically d ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Having trouble bringing in SVG file into my React project

I am currently using React version 15.4.1 and I have tried implementing a solution from this link. However, instead of the component being rendered, I only see a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg This is how ...

htmlreactjssvgecmascript-6loader

"Conceal the DIV only when neither of the switches are turned on

Is there a way to hide a paragraph only when two collapsible switch buttons are turned off in my Bootstrap frontend form? I have two checkboxes with corresponding switches, and the paragraph should only be hidden when both switches are off, but I'm no ...

htmljquerycsstwitter-bootstrap

Centered header with underline styled using CSS pseudo element

I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text. Here is my code: .headerWrap { ...

htmlcss

Is there a way to remain on the current page in WordPress after submitting a contact form?

I recently developed a personalized contact form within WordPress, utilizing PHP. The completed form successfully sends emails, but I am encountering an issue when users hit submit; instead of staying on the original page, they are redirected to a post pag ...

phpjqueryhtmlwordpressforms

Creating a Masonry Gallery without any spacing between images

I'm looking to create a unique masonry gallery design that eliminates any gaps between images. I've experimented with various plugins like masonry and isotope, but they still leave gaps in the layout. Packery seems promising, however it tends to ...

jquerycssjquery-isotopemasonrypackery

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

javascriptcssangulartypescriptasynchronous

Creating a Redirect Form that Directs Users to a Specific Page Depending on Input Data

Apologies if this is a basic issue, but I'm struggling to figure it out. I am trying to create a form field on a webpage that will redirect users to a specific page based on the data they input. For example, if someone types in "dave" and submits the ...

javascriptphphtmlforms

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

javascripthtmlvue.jsdraggablevuejs3

Create a stylish bottom border exclusively for the text that has been wrapped

My goal is to create an underline that perfectly fits the width of the text on the bottom row, without extending beyond it. The desired effect is shown in Figure 1. Figure 1 Here is the HTML I am currently using: <h2><span class="inline-block"& ...

borderinlinecssunderline

Ways to turn off default browser tooltip using bootstrap4 tooltip

Check out the code below, which demonstrates displaying both the bootstrap tooltip and the native title-attribute tooltip: This is an example of text with a tooltip using Font Awesome icon: <i class="far fa-question-circle" data-toggle="tooltip" title= ...

javascripthtmlbootstrap-4font-awesome-5

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

javascriptjqueryhtmlcss

Is it possible to create a CSS checkbox without using an ID or "for" attribute

Is it possible to create a CSS checkbox with label without using id and for attributes? I have tried the following method, but it doesn't seem to work. I know that I can create a CSS checkbox with id and for attributes like this: <div class="chec ...

htmlcss

Utilizing the CSS :not() selector within a nested table

I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...

csscss-selectorsajaxcontroltoolkit