I tried to include a height and width in the image using the class in Scss, and saw that nothing happens. Is it only possible to change the height or width inline?
HTML
<div class="footer">
<ion-img src="../../../assets/imgs/logo.png"
alt="Logo"></ion-img>
</div>
</ion-footer>
CSS
.footer {
ion-img {
width:40px;
height:40px;
}
}
You need to pierce the shadow Dom.
.footer {
::ng-deep ion-img {
width:40px!important;
height:40px!important;
}
}
Related
I'm using Ionic5 Angular and I would like to create a highlight around ion-avatar when the user clicked on it and will be disappeared if the user clicked on it again.
Users can click on each image (one at a time) and there will be a highlight around the image.
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar>
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
SCSS:
.scrolling-wrapper {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
.item {
display: inline-block;
margin: 4px;
}
}
You have to proceed like this:
Declare an empty variable (example: highlightedAvatar = "";)
Capture the id of the clicked item from the .html
If your variable has a value, you empty it, otherwise you assign the id
create the styles you want to add to the .css (e.g. brightness...)
Load the css class with a condition
You seriously need to provide some code so you can understand exactly the procedure
Edit:
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar [class.highlighted]="highlighted == item.id" (click)="selectAvatar(item.id)">
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
TS:
export class AppComponent{
highlighted = "";
...
selectAvatar(id){
if (this.highlighted === "") {
this.highlighted = id;
} else {
this.highlighted = "";
}
}
SCSS:
.highlighted{
filter: brightness(120%);
}
Of course you can toy around with the css to style your way of highlighting
Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4?
<template>
<ion-footer>
<ion-toolbar>
<ion-title v-if="loggedIn">
<a href="https://www.facebook.com/" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
export default {
name: "pageFooter",
computed: {
loggedIn() {
return this.$store.getters.loggedIn;
}
}
};
</script>
<style lang="scss">
ion-footer {
background-color: #ff0000;
ion-toolbar {
background-color: #00FF00;
ion-title {
background-color: #0000ff;
a {
font-size: 25px;
color: #000;
}
}
}
}
</style>
It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.
Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.
In your case, set the --background property of the component:
ion-footer {
--background: #ff0000;
}
How to apply background color for a full page in ionic
I used a code HTML
<ion-content padding class="bg.style">
in css
.bg-style {
background-color: #dddddd;
}
but I didn't get output please help me
try doing this
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.
Apply the background color to the .item-content element, as by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working.demo
Been working with the Zurb Foundation 3 framework.
I'm trying to set at smaller width than 1000px in the _settings.scss, but for som reason it only goes down to 770px even if I put in a smaller number. Here is what I did:
Executed compass: compass watch projectname
Edited _settings.scss: $rowWidth: 660px;
Set markup to:
<div class="row">
<div class="twelve columns">
<h1>Heading</h1>
<p>Some message here ...</p>
</div>
</div>
Here is how i solved it:
Created a _overrides.scss file: sass/_overrides.scss
Imported the file in app.scss: #import "overrides";
Added this to the _overrides.scss file:
#media only screen and (min-width: $rowWidth) {
.row {
min-width: $rowWidth;
}
}
#media only screen and (max-width: 767px) {
.row {
width: $rowWidth;
margin:0 auto;
}
}
Now I can control the width in _settings.scss by changing $rowWidth, for example: $rowWidth: 660px;
Just one little issue: if the $columnGutter is less than 30px there will be horizontal-scroll if the screen-size is less than 660px.
I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?
Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps