Syncing up text and icon in a single row using Angular CSS

I am working on a section with a grey row that will have both text and icons. Currently, my code looks like this: 

{{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>

While this works, I want the text to be on the left side and the icon to be on the right side - with the text aligned to the left corner of the container and the icon aligned to the right corner. To achieve this, I tried using the following code:

i { margin-left: 95px; }

However, when I increase the margin-left value, the icon shifts below the text instead of remaining on the same line. How can I create more space between them while still keeping both elements on the same line?

htmlcssangular

Answer №1

To create this layout, simply enclose both items in a span element. The containing (row) element should be styled with display: flex; and justify-content: space-between;.

Answer №2

To avoid manually setting the margin, it's recommended to utilize flex-boxes for achieving this layout. Simply apply the following CSS properties:

display: flex;
justify-content: space-between;

This will automatically space both child elements evenly on either side of the row.

Answer №3

To create a simple layout, enclose the text and icon within a div element, naming it as "container".

.container{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Ensure to specify a minimum width for the container to prevent it from inheriting the parent's width.

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

Function returning promise asynchronously, but caller function failing to resolve the promise

I have been researching similar items without success and I realize that I need a better understanding of promises, but I am facing some challenges. My project involves Ionic 4/Angular 8 with an Azure-based backend. I am trying to display images from Azur ...

javascriptangulartypescriptionic-framework

When utilizing a Service through UserManager, the User variable may become null

Utilizing Angular 7 along with the OIDC-Client library, I have constructed an AuthService that provides access to several UserManager methods. Interestingly, when I trigger the signInRedirectCallback function from the AuthService, the user object appears ...

javascriptangulartypescriptecmascript-6single-page-application

Guide on deploying an Angular 7 frontend paired with a Spring Boot backend

Having trouble with integrating my Angular application with Spring Boot REST backend. Can anyone suggest a simple method to run both on the same localhost port? ...

angularspring-bootangular-cli

The enigma of HTML forms never ceases to baffle

Currently, I am enrolled in a Vue.js course and have recently delved into the topic of forms and their management. The concept posed about how the < select > tag operates has left me puzzled. Is it correct to assume that its value corresponds to the ...

htmlvue.jsvuejs3

Angular is unable to access functions or variables within a nested function

I am currently utilizing google.maps.geocoder to make location requests within my Angular app. When I provide a callback function with the results, it leads to unexpected code breaks when trying to call another function that displays map markers. It seem ...

angulartypescriptfunctiongoogle-maps

"Exploring Angular with Storybook: Enhancing Components with NgControl

Having created the following Class : export class TestComponent implements OnInit, ControlValueAccessor { constructor( @Optional() @Self() public ngControl: NgControl) { if (ngControl) { ngControl.valueAccessor = this; } } I am now in ...

angularangular9storybookconstructor-injection

Issue arises when using Ionic 7 tabs with standalone Angular components

Hey, I'm new to Ionic and trying to learn it. However, all the courses available are on the old versions 5 or 6. I attempted to learn it with Angular standalone but it didn't turn out as I expected. The new way of routing wasn't working for ...

javascriptnode.jsangulartypescriptionic-framework

Having trouble connecting to the API due to the error "No Access-Control-Allow-Origin" in Angular 2

I am new to working with Angular2 and I'm currently facing a challenge in implementing authentication for an app using username and password login credentials. Unfortunately, I keep encountering the error message "No Access-Control-Allow-Origin". htt ...

angular

Adjust the color of the paper in Material-UI

I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...

javascriptcssreactjsmaterial-uiclass-names

Is there a way to send emails with subject lines containing special characters?

I am facing an issue where, when I send an email with the subject containing "Ç", it displays as "?". I have tried various implementations to fix this such as using -charset="ascii", -charset=UTF-8, and modifying the subject line with different encodings. ...

phphtml

Safari experiencing hang after successful CORS OPTIONS request

Safari (10 - OSX El Capitan) Issue with CORS Encountering a problem with CORS while performing a POST request from an AngularJS front-end to a Laravel back-end. In Chrome and Firefox, both OPTIONS and POST requests return http status 200 OK In Safari 10 ...

javascriptphpangularcorslaravel-5.3

Exploring the tab-content features of Bootsrap 5 through anchor tags

In the previous version of Bootstrap, the tab-pane used to fade in active. However, in the new version, it is now: tab-pane fade show active. What other improvements can I make? <!DOCTYPE html> <html lang="en"> <head> <m ...

htmlbootstrap-5bootstrap-tabs

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

javascriptphphtmlcssjson

Angular - Set value on formArrayName

I'm currently working on a form that contains an array of strings. Every time I try to add a new element to the list, I encounter an issue when using setValue to set values in the array. The following error is displayed: <button (click)="addNewCom ...

angulartypescript

Tips for sending arguments up in Angular2

I need to supply an argument to a function. <select class="chooseWatchlist" (change)="updateWatchlistTable(item.name)"> <option *ngFor="let item of _items">{{ item.name }}</option> </select> It's crucial for me, as I have ...

javascriptangular

What is the best way to incorporate custom buttons and Bootstrap buttons into various pages within a React application?

As I follow a tutorial, I aim to maintain their stylish approach for Buttons and Navbars while also incorporating Bootstrap for components like buttons. However, when I import Bootstrap Buttons, their styling seems to disappear. Is there a way to rectify t ...

javascriptcssreactjsbuttonbootstrap-4

Converting HTML tables into R

I have a series of HTML files with static content containing tables. I need to extract a specific column (4th column) from each table. I am currently using R to extract the tables from the HTML, but it seems like the rows are being combined for that partic ...

htmlrscreen-scrapinghtml-table

Tips for aligning the button and search bar in the center:In order

Currently still learning HTML, I'm facing an issue with centering a button and a search bar that are positioned beside each other. Despite trying multiple methods, I haven't been successful in achieving the desired centered layout while keeping t ...

htmlcss

Include a scrollbar within a Bootstrap table grid under a div with a width of 12 columns

How can I add a scrollbar to the grid below? It is using a bootstrap table inside a bootstrap col 12 div. I have attempted to use the following CSS, but it does not apply a scrollbar, it only disrupts the columns. divgrid.horizontal { width: 100%; ...

htmlcssvue.jsbootstrap-4styles

The visibility of Custom Hooks within the PrestaShop back-office is limited

After developing a module in PrestaShop and linking it to a personalized Hook, I encountered the following snippet of code: public function install() { if (Shop::isFeatureActive()) Shop::setContext(Shop::CONTEXT_ALL); return parent::install() &am ...

phphtmlhookprestashop