Arranging items in a flex-row towards the right side

I am working with a layout that aligns elements to the right

HTML

<div class="flex-row">
     <div class="flex-1">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

CSS

.flex-row {
  display: flex;
  align-items: baseline;

  .flex-1 {
    flex: 1 1 auto;
  }
}

However, I am facing an issue where when the content of the list is wider than the button, it appears misaligned like this:

-------
|  X  |
-------
-----------------
|               |
-----------------

Is there a way to ensure that the alignment stays to the right regardless of the width of the element below? Like so:

          -------
          |  X  |
          -------
-----------------
|               |
-----------------
htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

bootstrap 4 offers a wide range of pre-made classes for flexbox. Visit for more information.

Here's an example of updating the structure with classes:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="flex-row ">
     <div class="row justify-content-end">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

or perhaps you're interested in columns?

<div class="flex-row">
     <div class="row flex-column align-items-end">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>
</div>

To create a flexible container, use classes like .row, .d-flex, as mentioned earlier in the provided link ;) ...

Answer №2

To achieve the desired layout, you should float both elements

Here is an example of how it can be done:

Check out this code snippet on CodePen for reference

<div class="flex-row">
     <div class="flex-1">
          <button style='float: left;'class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li style='float: left; margin-left: 20px;'classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

You can also try this alternative approach:

<li style='float: right;'classs="el-upload">something wider than the button</li>

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

The HighChart graphs are not rendering properly within a limited div size

I have integrated a JavaScript library called Highcharts to visualize JSON data on a line graph representing stock prices. If you are unfamiliar with the terms used in this post, refer to the image linked below for clarity: https://www.highcharts.com/image ...

javascriptjqueryhtmlhighcharts

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

javascriptjquerycsstailwind-cssdropdown

Using a Node.js module to shrink HTML files

Is there a way to minify HTML before rendering it? I'm aware of console minifiers like: html-minifier However, I am looking for a solution that can be implemented in the code itself. Something along the lines of: var minifier = require('some- ...

javascripthtmlnode.jsminify

What is the best way to receive detailed error messages from the LESS compiler when using it in Symfony 2?

I have successfully implemented dynamic compilation of LESS scripts to CSS in Symfony 2 by following this guide: However, I am facing an issue where if there is an error in a LESS script, the compilation fails and no CSS is generated for the browser. Is t ...

csssymfonyless

What is the best way to eliminate an unassigned margin from my layout?

The content of my css file is as follows: .menu { background-color: black; color: white; height: 100px; opacity: 0.5; } html { background-image: url('image.jpg'); background-size:cover; } Despite the lack of text ...

cssmargins

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

In Internet Explorer 7, z-index 1 does not display correctly

I am trying to apply z-index: -1; to a div with the class "ie7" that is positioned relative. This div is nested within another div that is also positioned relative. It seems to work in all IE browsers except for IE 7. Any assistance on this matter would ...

jqueryhtmlcss

Is it possible to dynamically assign a CSS class to a DOM element during a drag operation while the mouse button is held down?

I am currently working on developing a unique pathfinder visualizer. My progress so far includes creating a grid of size 16x45 using the function below: export const drawBoard = () => { const boardContainer: HTMLDivElement | null = document.querySelec ...

javascriptcsstypescriptdom-events

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Deploying a React application to Heroku or GitHub pages can sometimes alter the appearance of styles and CSS

As a newbie to coding, I've managed to create multiple full-stack apps, but I've encountered a frustrating issue each time I deploy them to Heroku or GitHub Pages. Every element on the page seems to shrink in size compared to what it was on my lo ...

cssreactjsgithubherokuresponsive

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Here is a code snippet I have been using to open a URL in a new tab: window.open(urlToOpen, '_blank', 'noopener noreferrer'); The issue I am experiencing is that when this code is executed for the first time, it opens the URL in a new ...

javascripthtmltypescripturlbrowser

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...

css

When using Selenium with Java, interacting with checkboxes produces varying results compared to manually clicking on them

I'm encountering an issue with clicking on a specific checkbox that should be checking all the other checkboxes below it (root parameter). Previously, when using the following code on the element: arguments[0].click(); Attempting to use the regular ...

javascriptjqueryhtmlseleniumcheckbox

Having trouble with a basic select tag and options not functioning properly in Chrome browser

I encountered an issue where I am unable to expand a simple select tag in Chrome. <select id="filterCategory" class=""> <option>1</option> <option>2</option> <option>3</option> <option>4</option ...

javascripthtmlcssgoogle-chrome

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

jquerycss

Is there a way to automatically scroll to the bottom of a div when it first

Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages. Utilizing VueJs: <template> <div id="app"> <div class="comments" ...

csstypescriptvue.jsscroll

Arranging images in layers using jQuery or CSS

My current challenge involves two overlapping images. I am looking for a solution where clicking on the back image will bring it forward. I prefer a simple method that is also mobile-friendly since I am using Bootstrap for responsiveness. What suggestions ...

htmlcsstwitter-bootstrap

Preventing the negative consequences of being colorblind through programming techniques

My experience as a web developer has taught me that poor color contrast on a website can severely impact revenue. I am determined to change this, but have encountered an issue. On my site, there is a section where users can select a color and see it displa ...

javascripthtmlcolorsaccessibility

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

htmlcss