What is the best way to align an image to the right of an ion-label?

I'm struggling to place a colored WhatsApp image on the right side of an ion-label. Here's what I have so far:

<ion-row>
   <ion-col size="10">
     <ion-label position="floating">Contato 1* </ion-label>
   </ion-col>
   <ion-col size="2">
     <ion-img class="whatsapp"></ion-img>
   </ion-col>
</ion-row>

CSS : 

.whatsapp {
  height: 20px;
  width: 20px;
  background-image: url("../../assets/whatsapp.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom left;
  }

PS: I've tried using 

ion-img [src]="assets/whatsapp" /ion-img
, but it doesn't work!

https://i.sstatic.net/bLSDQ.jpg

I followed @Carlos Del Cura Pascual's advice, and now my layout is almost perfect.

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

htmlcssangularionic-framework

Answer №1

Consider utilizing flexbox for aligning items in a row. → https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Avoid relying on float or similar techniques

    ion-row{
      display:flex;
      flex-direction:row;
      justify-content:space-around;
      align-items:center;
     height: /* giving height allows for vertical alignment */
    }

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

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

Utilizing Google Maps to display an infowindow upon clicking a location from a geojson file

I want to implement info windows that pop up when markers on a map are clicked. I used the sample code provided by Google (below) to create a marker map from geojson files dragged and dropped into the window. My goal is for the info windows to show text ta ...

javascripthtmlgoogle-maps

html2canvas is unable to capture images containing captcha

Below are the HTML codes: <div id="divPage"> div_Page <br/> <img id="captchaimglogin" src="https://www.emirates.com/account/english/login/login.aspx?cptLogin_captcha=86e2a65e-f170-43b6-9c87-41787ff64a35&t=88d296b19e5e8000&mode=ss ...

jqueryhtmlscreenshotcapturehtml2canvas

Mathematics: When the numbers just don't add up

Can you help me figure out this calculation? €70.00 Total VAT €12.6 Total €82.59 I'm puzzled as to why the total jumps from 12.6 to 82.59. Is there a known issue causing this discrepancy? ...

htmlasp.net

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascriptcssminifygoogle-closure-compileryui-compressor

The tooltip indicator fails to display

I'm having an issue with my tooltip. I would like my tooltip to look like this: However, the actual result is like this: Here is the HTML & jQuery code I am using: <td style="padding-left:5px;padding-right:5px;" align="left" data-toggle="to ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

javascriptcssangularjs

Applicable exclusively to the parent list item

I am creating a menu with a submenu that has a varying line-height. Unfortunately, I am struggling to prevent this line-height from impacting the list items in my child (submenu). I attempted using ul.nav > li but it continues to affect the lower menu ...

jquerycss

The IDs and classes of HTML elements

I have two different implementations of a livechat script. On my sandbox site, the livechat is fixed to the bottom right of the page and scrolls with the window. However, on my live site (where this specific code comes from), it is attached to the footer. ...

javascripthtmlcss

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

Issue with Checkbox Functionality: In a Material Dialog Component, I have implemented several Material Checkboxes to serve as column filters for a table: <h1 mat-dialog-title>Filter</h1> <div mat-dialog-content> <ng-container *ng ...

htmlangulartypescriptangular-material

How come flex won't let me rearrange an image?

.nav { height: 500px; } .navphoto { height: 500px; display: flex; justify-content: flex-end; } <div class="nav"> <img class="navphoto" src="images/navphoto.jpg"> </div> Just wondering why I can't seem to move an image, bu ...

htmlcssflexbox

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

jquerycsstag-it

``There seems to be an issue with the functionality of the background-position attribute

I've been following a tutorial on web design from tutsplus. I have completed everything except for one issue with the HTML styling. You can see I have included height:100%, but in the original tutorial, that line was not there. If I remove it, the lay ...

htmlcssxhtmlbackgroundposition

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

htmlcss

What is the best way to enable an element to overflow within a block-level element?

Is it possible to have vertical scrolling in a bootstrap table while also allowing certain elements to expand and overflow the entire table on hover? I am facing an issue where setting tbody { display: block } for vertical scrolling prevents the expanding ...

htmlcssbootstrap-4

What to do when the image-sprite is too large for the container and needs to be resized to fit within a smaller

Is there a way to resize the sprite image to fit the container without using the tag? The sprite image dimensions are 562px (x5) width x 562px height main-desktop.png .container_outer{ height:200px; width:100%; } .chrome-part, .ie-part, .firefox- ...

htmlcssbackground-imagecss-sprites

Looking for image src attribute within a string using JavaScript and appending a function to it

When using ng-bind-html in AngularJS to render an HTML string, I encountered the need to add an ng-click function to every img element. For example, here is the HTML string: $scope.html="<--some html content--> <img class='some ...

javascriptstringangularreplace

What is the reason for parsing JavaScript code when the page is first loaded?

I recently placed an Adsense (for content) code on my website in order to show a single ad: <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <ins class="adsbygoogle" style="display:inline-block;width ...

javascripthtmlasynchronousadsense

Having trouble fitting the network into the bootstrap panel with VIS JS

I have been experimenting with vis.JS to visualize a network graph using some data. However, when I display the network within a bootstrap panel, it appears very small and unreadable. Even zooming in causes loss of perspective on the data. https://i.sstat ...

javascripthtmlbootstrap-4jinja2vis.js

What specific CSS attribute changes when an element is faded out using jQuery's FadeOut method?

When we make an element fade in or out, which specific CSS property is being altered? Is it the visibility attribute, or the display property? I am hoping to create a code snippet with an if statement condition that reads (in pseudo code): if the div is ...

jquerycss