How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-icon on the right. I attempted to use floats (right/left) or additional flex-box properties like justify-self: end or flex-end, but these solutions were ineffective. Unfortunately, the urgent-icon moves to the left when it should consistently stay on the right. Is it feasible to achieve this layout using flex-box? What am I missing?

<div class="d-flex justify-content-between">
    <a class="text-underline flex-wrap w-70" (click)="navigateToDetails($event)">{{request.id}}</a>
    <div class="d-flex justify-content-between w-30">
        <img src="assets/v-icon.svg"
             title="Urgent Request" (click)="navigateToDetails($event)"
             [tooltip]="'Link redirects to Vendor Req.: ' + request.id"
             [options]="{'tooltip-class': 'tooltip-style', 'placement': 'top'}">
        <img *ngIf="request?.urgent" height="22" width="22" src="assets/urgent-icon.svg"
             class="float-right">
    </div>

</div>

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

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

htmlcssangularflexbox

Answer №1

Simply add the correct icon using margin-left:auto

div {
  width: 150px;
  border: 1px solid red;
  padding: 1em .25em;
  display: flex;
  justify-content: space-between;
  margin: 1em;
}

span:last-of-type {
  margin-left: auto;
}
<div><span>1</span><span>2</span></div>

<div><span>2</span></div>

Answer №2

To space out images, use flex: 1 1;

.main{
    width: 50%;
    height: 50px;
    background: rgb(200, 200, 200);
    display: flex;
}

.spacer{ /* this will expand into all the space left over */
    flex: 1 1;
}

span{
    height: 100%;
    width: 50px;
    background: rgb(150, 100, 255);
}

.red{
  background: rgb(255, 100, 100);
}
<div class="main">
    <span></span>
    <div class="spacer"></div> <!-- Insert this between images -->
    <span class="red"></span>
</div>
<br>
 <div class="main">
    <div class="spacer"></div> 
    <span class="red"></span>
</div>
<br>
<div class="main">
    <span></span>
    <div class="spacer"></div>
</div>

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

Angular services do not hold onto data in memory

Working on an app with a date filter and encountering an issue: I am trying to store data in my service, but when I route, the array in the service keeps resetting itself. How can I maintain the data permanently in my service? Below is the code snippet: ...

angularservice

Angular: seamlessly transferring all directives from parent component to child without interference

Imagine we have a component called main that includes another one named sub. I would like for the directive passed to main in the client side, such as: <main dir1='dirval1'></main> for the main component to act as a thin wrapper and ...

htmlangulardirective

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type

I encountered an error while building my Ionic 5 project with the --prod flag. The error message I received is as follows: Error: src/app/pages/edit-profile/edit-profile.page.html(8,142): Property 'translate' does not exist on type 'EditProf ...

javascriptangularionic-framework

Tips for selecting an element within a span by clicking on it?

Is there a way to click on an element that is contained within a span tag? I have attached a screenshot for reference. https://i.sstatic.net/FkhDB.jpg I would greatly appreciate any help on how to successfully click on that specific element. ...

jqueryhtmleclipseselenium-webdriver

What is the best way to use Google Material-Design-Icons in my project once I have installed it

Once I've installed the material-design-icons package using npm, how can I incorporate them into my React application? The instructions provided here do not mention the npm method. ...

cssreactjsnpmmaterial-designmaterial-ui

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Apply a class to each consecutive element following the current one until reaching a child element with a

My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next o ...

javascriptjqueryhtmlcss

Creating consistent height for elements in different columns using Bootstrap 5

I'm struggling with keeping the ".item" elements equal height in different columns. Does anyone have a solution for this? <div class="container"> <div class="row"> <div class="col-8"> <h3& ...

cssflexboxbootstrap-5

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

javascriptcssreactjs

Header and footer set in place with customizable height paired with a dual-module sidebar

I'm working on a layout that includes a fixed footer and header. My goal is to make the height of the "info-box" div variable, while having the "scrolling-div" fill the remaining vertical space in the right column. The issue arises when setting the he ...

csspositionhtmlcss-position

HTML code now launches in the existing electron window rather than opening a new window

<html> <head> <title></title> </head> <input type="button" name="new" id="newmon" value="new"> <button onclick="open1()">monitor 1</button&g ...

javascripthtmlnode.jselectron

Contact the help desk and receive information that is currently unknown

There are a few issues that I'm struggling to resolve. I am utilizing SwaggerService to fetch data, but the response is coming back as undefined. import {SwaggerService} from '../../services/swagger.service'; export class TestComponent im ...

angulartypescriptswagger

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

htmlubuntuhyperlink

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Position the button at the bottom of the page with MUI v5 in a React application

How can I ensure the button is always positioned at the center bottom of the page, regardless of the content height? This is a snippet from my code: const useStyles = makeStyles({ button: { bottom: 0, right: 0, position: "absolute" ...

javascriptcssreactjsmaterial-ui

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

While working on my project, I encountered an issue with selecting rows. After some debugging, it was revealed that the culprit behind this behavior is the tabulator_materialize.min.css file. Interestingly, when I don't use this CSS, everything functi ...

csstabulator

What is the best way to modify a newly added element using jQuery?

When a user clicks a button on my screen, a new template is loaded dynamically using jQuery's .load() method. This transition adds new HTML to the page that was not present when the script initially loaded: (function($) { $('.go').on("c ...

javascriptjqueryhtmlcss

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

javascriptjqueryhtml