Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent to it? Any help with this issue would be greatly appreciated.

https://i.stack.imgur.com/BhoNh.png

            <div>
                <th class="fd-table--header-cell" [innerHTML]="quantity | fdContent"></th>
                <div class="myclass">
                    <a [attr.id]="mySelector"
                        [attr.aria-describedby]="myTooltip" href="javascript:void(0);"
                        class="fd-tooltip-layer--selector">

                        <help-icon [helpIconId]="myHelpIconId" [content]="pageDataContent"
                            aria-label="icon" [title]="quantity"></help-icon>
                    </a>
                </div>
            </div>


.myclass {
float: right;

}

htmlcssangularjsangular

Answer №1

To achieve the desired layout, simply utilize flexbox and apply display:flex to the parent of both HTML elements.

Designate the parent element as a flexbox container, causing its direct children to become flex elements. By default, flexbox aligns elements in a row (flex-direction: row), resulting in a left-to-right alignment of the flex elements.

.container {
  display: flex;
  align-items: center;
}
<div class="container">
  <strong>quantity</strong>
  <a href="http://google.com">google</a>
</div>

Answer №2

To tackle this issue, leverage the power of Flexbox. Here's what you can do:

Begin by defining a new class:

.container {
    display: flex;
}

Apply this class to the parent element:

<div class="container">
   <th class="fd-table--header-cell" [innerHTML]="quantity | fdContent"></th>
   <div class="myclass">
      <a [attr.id]="mySelector"
      [attr.aria-describedby]="myTooltip" href="javascript:void(0);"
      class="fd-tooltip-layer--selector">
      <help-icon [helpIconId]="myHelpIconId" [content]="pageDataContent"
      aria-label="icon" [title]="quantity"></help-icon>
      </a>
   </div>
</div>

Adjust the spacing as needed:

.myclass {
  margin-left: 5px;
}

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

Change not accepted

I am a beginner in Angular and still grappling with the fundamentals. On my menu, I have a cart icon with an initial value of 0 upon first load. In my product list, each product has an 'AddToCart' button. What I aim to achieve is- I want to dy ...

javascriptjqueryangularjs

What steps can be followed to incorporate a loading gif into this popup and subsequently eliminate it?

These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could ...

jquerycssloadinganimated-gif

Set the constant value during the configuration stage

I have a special Angular constant that requires configuration after the initial app setup. This constant includes various endpoints, some of which are only determined after the app performs certain checks. Currently, I am handling this by returning some e ...

angularjs

The most recent release of Chrome (Version 47.0.2526.80 m) introduces an intriguing feature. When using navigator.webkitGetUserMedia, the returned stream now lacks a

I recently encountered a problem with my code that used to access the camera on Chrome browser and release it after use. Here's the code snippet: Starting the Camera: navigator.webkitGetUserMedia($scope.options.videoObj, function (stream) { $sco ...

javascriptjqueryangularjsgoogle-chrome

Display content exclusively to users

I am using Devise to allow users to log in through Facebook or create an account on my website. Once logged in, they have the ability to add movies to their front page. However, the issue is that every user can see all the movies instead of just the ones t ...

ruby-on-railsangularjsdevise

Switch tab colors when clicked

I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. Second ...

htmlcssbootstrap-4

AngularJS Event Handler Fails to Trigger

I'm currently working on a form that I need to submit using the ng-submit event through a custom Auth service. This is a snippet of the login.html (partial template) <div class='container'> <form class='form-signin' ...

javascriptangularjsevent-handlingscope

What is the best way to align inline circles created with CSS vertically as the screen size changes?

Looking for resources on how to create circles using CSS? It can be a bit tricky, but here is the code you need: HTML <div id="wrapper"> <ul id="circles"> <li> <div class="circle"><div>K&l ...

htmlcssresponsive-designgeometry

Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process. Below is my code with ...

javascriptjqueryhtmlcss

Customizing ExtJS Themes for Ext.panel.Panel

In my current project using ExtJS 4.1.1a, I am working on creating a new theme for a "tabbedPane" and a normal Panel with an "Accordion" layout. However, I am facing difficulty in changing the color of the headers for both elements. I wish to customize the ...

javascriptcssextjsthemessass

Adding custom CSS and JavaScript to an Angular 4 project can be done by including the necessary

When working with Angular 2, I was able to include stylesheets directly in the index.html like so: <link rel="stylesheet" href="css/mycss.css"> However, with Angular 4, the styles need to be added to the angular-cli.json file within the styles and ...

node.jsangulartypescriptangular-cli

Error encountered on login page: The protocol 'http' does not exist (related to HTML, TypeScript, Angular2, and JavaScript)

Screenshot of the issue: Access the complete project here: Link to a Plunker example of a log-in screen: http://plnkr.co/edit/j69yu9cSIQRL2GJZFCd1?p=preview (The username and password for this example are both set as "test") Snippet with the error in ...

javascripttypescriptangular

Data within AngularJS is bound when receiving an Ajax response in HTML

In my current project, I am using Python/Django for the backend with a complex structure of forms. The frontend consists of an Angular controller that makes requests to fetch a suitable form. While working on this, I came across a Django-Angular package th ...

javascriptpythonajaxdjangoangularjs

Integrating Angular with Django using the REST framework

Is there a way to serve Angular using only a Django server without the need for separate servers? I have created a frontend application with Angular 6 and backend with DRF, currently running the django server in the backend and using ng serve command for ...

djangoangulardjango-rest-framework

Error: Jasmine cannot access a property of undefined value

Just getting started with js and jasmine Attempting to create a jasmine test case for my method. Encountering an error: TypeError: Cannot read property '0' of undefined. Tried different ways of passing arrays into my method sports but still facin ...

javascriptjqueryhtmlangularjsjasmine

Issue encountered when trying to import an image URL as a background in CSS using Webpack

I have been trying to add a background image to my section in my SCSS file. The linear gradient is meant to darken the image, and I'm confident that the URL is correct. background-image: url(../../assets/img/hero-bg.jpg), linear-gradient(r ...

javascripthtmlwebpacksass

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

While developing my website, I faced a challenge with the structure. The home page was built using traditional HTML/CSS, while the other pages were created in Vue.js. Is there a method to connect these two different types of files? For instance, can I inc ...

javascripthtmlvue.js

Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay. Check out this image Any ideas on how to achieve this? .section-card{ position: relative; height: 500px; line-heigh ...

javascriptjqueryhtmlcss

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

javascripthtmlcsswordpresselementor

My component is missing the ChangeDetectorRef in Nativescript

I am attempting to automatically update an array within a Listview by utilizing ChangeDetectorRef in the following way: import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core"; @Component({ selector: "regi ...

angulartypescriptnativescriptangular2-changedetection