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

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

htmlcss

css - flexible div height based on content

Issue encountered: In my website, I have a dynamically generated content inside a specific div. On the left side of the provided URL, you can see the current appearance of the div. It is worth noticing that the height of the container div (mainContent_mid ...

htmlcssfrontend

Extend the row of the table according to the drop-down menu choice

I am working on a feature where a dropdown menu controls the expansion of rows in a table. Depending on the option selected from the dropdown, different levels of items need to be displayed in the table. For example, selecting level 1 will expand the first ...

javascriptangulartypescript

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

htmlcss

Guide on how to use JavaScript to swipe through loaded epub files in both lateral directions

Hello everyone, I have a question about implementing swipe functionality on a loaded epub using JavaScript. I successfully loaded the epub into a div and now I need to enable swipe left and right gestures on that div. I found a jQuery script that should a ...

javascripthtmljqueryswipeepub.js

Advanced Angular2 Services Expansion

I'm looking to enhance an existing angular service (for example, Http). Requirements: The extension of the service should be done through angular's dependency injection It should be possible to extend the service multiple times using a pattern ...

angulartypescript

Tips for utilizing callback function in Angular 4

I previously used the Google API to obtain a current address and now I want to incorporate a callback function in this process using Angular 4. How can I go about implementing it? let geocoder = new google.maps.Geocoder(); geocoder.geocode({ &ap ...

angularjsangularfunctioncallback

Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...

htmlcss

Angular is patiently waiting for the $http request to finish before moving on to the next function

After extensive searching for a solution to my issue, I have come up empty handed. Allow me to provide some context: I am currently adding new features to a Web application that I created, which is used to manage the development of webpages for various cl ...

angularjshttppromisewait

What is the best way to transfer data from an HBS template (HTML) to an Axios POST request?

Just diving into nodejs and express! I want to pass the user input (an email) to axios.post request's data when the "submit" button is clicked. I've verified that hard-coded data in the axios request is functioning correctly. data_email.hbs &l ...

htmlnode.jsexpresshandlebars.jsaxios

AngularJS promise fails to resolve when attempting to read a file using the FileReader

Can someone assist me with a function I am trying to create in my service? I want the function to use FileReader to read a small image file and return the result in a promise to my controller. The issue is that while the file reaches the service without an ...

javascriptangularjspromise

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

javascriptjquerycssstyles

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

cssreactjsantd

Navigating with Angular 6 using routerlink in a child module with router-outlet specified in the parent component (app.component

I'm currently working with the RouterModule and encountering an issue with the routerLinks. The problem I am facing is that the routerLinks are not functioning properly (the anchor tags are not clickable). This issue arises because they are located w ...

node.jsangulartypescriptangular6

Using CSS grid can allow for paragraphs to overlap on top of each

Currently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layout. I have attached an image to ...

htmlcsspositionoverlappingparagraph

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

What steps are involved in integrating OpenCV into a JavaScript project?

After recently installing OpenCV via npm using this guide: https://www.npmjs.com/package/opencv I'm facing a simple question. How can I actually utilize the OpenCV library in my project? The site provides a face detection example code snippet: cv.r ...

javascriptangularjsnode.jsopencvnpm

md-table Using FirebaseListObservable as a DataSource

I am currently working with a FirebaseListObservable and a BehaviorSubject that is listening for an input filter. The goal now is to merge these two entities in order to return an array that has been filtered based on the input value, which will then be us ...

angularangularfire2angular-material2

The chosen sidebar item fails to show the respective component

Is there a way to show a component when the user clicks on the sideNav? Currently, I have managed to display the SideBarNavigation using ng-simple-sidebar. However, when I click on a sidebar item, the component opens as a new page instead of being display ...

angular