I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.
Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.
This is what I have in my HTML:
<ion-slides pager>
<ion-slide *ngFor="let image of offer.Gallery">
<img [src]="image.Url"/>
</ion-slide>
</ion-slides>
And this is how it renders:
<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
<div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
<ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
<div class="slide-zoom">
<img src="IMG">
</div>
</ion-slide>
</div>
... Pagination ...
</ion-slides>
You'll notice that somehow the ion-slide tag has a style="width: 171px;" set on it. What is causing this and is there a way to turn it off?
you can address the ion tags directly in Ionic 3!
A more dynamic solution would be using unset value for it.
Just try to write in your yourpage.scss:
ion-slide {
width: unset !important;
}
and it should remove it!
If it is not the width you need then just change it as shown below.
Note: There are No Saas variables for this
your-page.scss
.md,
.ios,
.wp {
.swiper-slide .swiper-slide-active{
width: 100px;//your width here
}
}
Note: If above was not working then you must use width: 100px !important;. No other option where I can think of.
Try this:
ion-slide >:first-child {
width: 100%;
}
The slidesPerView option defaults to 1; to show more slides at a time, increase this in your slider options.
HTML:
<ion-slides pager [options]="slideOpts">...
typescript:
slideOpts:any = {slidesPerView: 7}
Related
Is there a way of writing CSS to reduce the file size of a style sheet containing lots of adjoining classes. Example...
body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}
hey Use :is selector to reduce the code please check. to learn more about it here
body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37 ) .elementor-widget-spacer {
margin-bottom: 10px;
background: red
}
<div class="elementor-2">
<div class="elementor-element elementor-element-949d9dd ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-427933f">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-cb8ce37 ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
If you use the widget spacer in a different position every single widget makes those classes with the different ids. So you can't reduce the classes.
So if you need not write all the classes on the CSS file.
Use this CSS.
body .elementor-widget-spacer {
margin: 0 !important;
}
or
body .elementor-widget-spacer {
margin: 0;
}
It works with all of the spacer widgets on the webpage.
if you are using elementor.you don't need to do it with custom CSS. Elementor has a dedicated control for this. edit the column, select the layout tab to find widget space, and make it 0. Inside the column, your widget gap will be 0.
Before Doing 0
After Doing 0
Or
you are not using Elementor you can go with :is().To learn more about it follow the article Here
i'm new to ReactJs and my question may seem stupid to many of you, but i have a problem with setting the background. My React code is:
<header className="masthead ttt">
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1>Blog Name</h1>
<span className="subheading">blablablablabla</span>
</div>
</div>
</div>
</div>
</header>
So basically i'm trying to set an image as background in my header , so i created a class .ttt and modified it to my css that way :
.ttt{
background-image: url("../img/home-bg.jpg");
}
And finally here's the way the folders are set :
Am i doing anything wrong in my code ? Or there's another way of doing things in ReactJS!
Thanks!
So far what I understood from your problem is that you are not getting the image on the front-end. While checking it through developer options it must be pointing you to a blank div at the top of the screen.
If that's the case then it is because that every background image needs some size to be displayed.
You can either give width and height or you can give background-size property as follows:
.ttt{
background-image: url("../img/home-bg.jpg");
width: 100%;
height: 100%; // giving height is not compulsary but just for good practice.
}
OR
.ttt{
background-image: url("../img/home-bg.jpg");
background-size: 100% 100%; // First value: {Width} Second value: {Height}
}
This would resolve your issue.
Use inline css in javascript like this:
import Background from '../img/home-bg.jpg'; // make sure path is correct
<header className="masthead" style={{ backgroundImage: `url(${Background})` }} >
ref Be mindful of using backgroundImage instead of background-image
Working for me
<div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}>
</div>
This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change
All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls.
But using the image in a mat-card it is a longer length and thus looks out of place shown here:
The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for displaying these:
<div *ngIf="data;else other_content">
<div class="row">
<div *ngFor="let project of data" class="col-md-6">
<div>
<mat-card class="mat-elevation-z4">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{project.title}}</mat-card-title>
<mat-card-subtitle>{{project.category}}</mat-card-subtitle>
<div class="grow-empty"></div>
<div *ngIf="project.source">
<button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
</div>
</mat-card-header>
<img mat-card-image src="{{project.image}}" alt="{{project.title}}">
<mat-card-content>
<p>
{{project.detail | slice:0:250}}...
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button>Information</button>
</mat-card-actions>
</mat-card>
</div>
<br>
</div>
</div>
</div>
If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it
I want it to be a set scale like it is, but take any image and scale it up/down to sit and be an appropriate size for the card itself (like Callum.Tech card for example)
Just add this style reference in your code.
If you want to apply this styles to all your cards in the view, add to your style file:
mat-card img{
object-fit: cover; /*this makes the image in src fit to the size specified below*/
width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
height: 80%;
}
Another solution to this issue may be using the class of bootstrap "img-responsive". Here is a brief description
Just add css-class to the image and and style the image from the SCSS file.
<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">
Now in SCSS:
imgs {
height: 50px;
width: 50px;
}
And for more to Information visit W3school.com/image.
Please how can I override the default height of md-nav-item in angular material using CSS. I have the following sample code:
<div ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-selected-nav-item="currentNavItem"
nav-bar-aria-label="navigation links">
<md-nav-item name="Page1" md-nav-click="goto('page2')">
Link1
</md-nav-item>
<md-nav-item name="Page2" md-nav-click="goto('page2')">
Link2
</md-nav-item>
<md-nav-item name="Page3" md-nav-click="goto('page2')">
Link3
</md-nav-item>
</md-nav-bar>
<div class="ext-content">
{{currentNavItem}}
</div>
</md-content>
See also example on plunker
After inspecting the styles, you can do something like this to change the height of the nabvar:
PLUNKER (Work from angular-material version >= 1.1.0)
.md-nav-bar, .md-nav-bar > nav, ._md-nav-bar-list, .md-button._md-nav-button{
height: 50px;
}
.md-button._md-nav-button {
padding: 0;
min-height: 0;
}
**** Be sure of include your styles.css file after the angular-material.css file in your index.html
Explanation: You're asking about change the height of md-nav-item, but in fact, this directive is writing/transcluding a ul._md-nav-bar-list with .md-button._md-nav-button inside each li. So, you have to change the height of .md-button._md-nav-button. But the problem is that buttons doesn't have height, they have padding and min-height.
And even, the main problem is that .md-nav-bar has a default height (48px), so if you change the height of items inside it, it doens't matter, you have to override this default height first.
I have the following ion-view :
<ion-view view-title="Success" ng-controller="successController" class="success-view">
<ion-content>
<div class="row row-center">
<div class="col">
<h1>Success!</h1>
<h3>Your login credentials will be SMSed to you shortly</h3>
<button class="button button-block button-positive" ui-sref="login">
Okay
</button>
</div>
</div>
</ion-content>
</ion-view>
I'm trying to vertically align that col in there in the screen. Now I understand that the only way this is going to work is if my row takes up 100% of the height. Yet if I go ahead and add style="height: 100%;" to my row it doesn't work, the row's height still wraps to it's contents. Even if I add !important it still doesn't span the full height of the screen... Any ideas?
Seems like Ionic framework adds a dynamic class scroll wrapping the row. Add a height: 100% to the parent scroll as well.
.row, .scroll {
height: 100%;
}
Output:
Ionic Demo