Utilizing thumbnails and avatars within ion-slide in Ionic 2

When using Ionic 2, the 'ion-slide' element does not render avatar and thumbnail images in the expected sizes, instead displaying them in larger sizes.

Here is the code snippet:

    <ion-slides>
     <ion-slide>
       <ion-item class="item item-trns item-stable">
            <ion-avatar item-left>
                <img src="http://placehold.it/300x300" class="avatarImage"/>
            </ion-avatar>
            <ion-avatar item-right>
                <img src="http://placehold.it/300x300" class="avatarImage"/>
            </ion-avatar>
        </ion-item> 
     </ion-slide>
    </ion-slides> 

SCSS:
.avatarImage {
    width: auto;
    height: auto;
}

Is it not possible to use avatars inside ion-slide in Ionic 2?

cssionic-frameworkionic2

Answer №1

To adjust the image size, simply modify the width property from width:100% to width:auto.

Answer №2

Can we eliminate the default SCSS's max-width property in order to only need these two properties:

{
    width: auto;
    height: auto;
}

Answer №3

Instead of using the code below

<ion-avatar item-left>
    <img src="http://placehold.it/300x300" class="avatarImage"/>
</ion-avatar>

try implementing this instead:

<ion-thumbnail item-left class="avatarImage">
    <img src="http://placehold.it/300x300">
 </ion-thumbnail>

Answer №4

<ion-item-group>
<ion-item-divider color="light">PHOTOS<span style="float:right;">MORE</span>
</ion-item-divider>
</ion-item-group>


<ion-scroll scrollX="true" class="ion-scroll-thumbnail">           
<img width="90" height="90" class="avatarImage"

src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg"> 

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

</ion-scroll> 

/* CSS */

.ion-scroll-thumbnail {
white-space: nowrap;
height: 90px;
}

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

What is the best way to increase the space between table columns in CSS?

I'm struggling to increase the space between the columns in a simple table with two columns. The column-gap property doesn't seem to be working for me. Any suggestions on how I can achieve this? JSFiddle #t td { -webkit-column-g ...

htmlcsscss-tables

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

jqueryhtmlcss

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

jquerycsshtml

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details: Html: <div class="col-12"> <mat-form-field appearance="fill"> <mat-label>Start Date ...

htmlcssangulartypescriptangular-material

Placing a pseudoelement amidst the track and thumb of a range input type

I'm trying to position a pseudo element with a specific z index that is lower than the thumb of an input type range but higher than its track. This is what I have so far: HTML: <div class="range"> <input type="range" name="" class="progre ...

csshtmlz-index

Tips for evenly distributing these cards

Check out the full code on Codepen.io <div class="card-container"> <div class="card col-lg-4 col-sm-6 col-xs-12"> <div class="side">Jimmy Eat World</div> <div class="side back"><img ...

htmlcssbootstrap-4

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

javascriptjqueryhtmlcssjquery-selectors

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

javascriptjqueryhtmlcss

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

htmlcss

Is it possible to display a modal view when clicking on a textfield without the keyboard automatically popping up?

As a beginner in the realm of AngularJS and the Ionic framework, I am currently working on developing a hybrid app utilizing PhoneGap and Ionic. I have encountered a scenario where, upon clicking a UITextField, a modal should appear with a list of account ...

iosangularjscordovaionic-framework

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

javascriptcssreact-native

Disabling page transition animation in Ionic 4 / Angular: Step-by-step guide

Is there a way to disable the page transition animation when using 'routerLink' to navigate to a new page? I've searched through the documentation and other sources but couldn't find a straightforward answer. Any guidance on this would ...

angularionic-framework

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

c#asp.netcss

Styling a div to wrap around an image

I'm working with an image element that has the style attribute set to style='width:40%;height:40%'. My goal is to add a div around this image that will automatically adjust its size to wrap around the image. However, when I try inserting the ...

htmlcss

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

javascripthtmlcssreactjsstyled-components

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting up only two input fields side by side in an Angular Form

I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...

javascriptcssangulartypescriptangular-material

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap