Some elements, like the button, have native ripple effect on Ionic 2. Others like cards doesn't. How could I add support to ripple effect on an arbitrary Ionic 2 element?
Try wrapping the content like this:
<button ion-item>
<ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>
As I see by sources of Ionic v3.3, a container element must contain an empty div element with button-effect class, also the container must have tappable attribute and be styled as position: relative; overflow: hidden.
In my project I use a following directive to style button-like containers:
import {Directive, ElementRef, Host, Renderer2} from '#angular/core';
#Directive({
selector: '[m-ripple-effect]',
host: {
'tappable': '',
'role': 'button',
'style': 'position: relative; overflow: hidden'
}
})
export class RippleEffectDirective {
constructor(#Host() host: ElementRef, renderer: Renderer2) {
const div = renderer.createElement('div');
renderer.addClass(div, 'button-effect');
renderer.appendChild(host.nativeElement, div);
}
}
You need to use the button element
and you can still have the ion-item directive:
From:
<ion-item (click)="viewArticle()"></ion-item>
To:
<button ion-item (click)="viewArticle()"></button>
A more complete example based on the answer of Bartosz Kosarzycki:
<ion-list>
<button ion-button style="height: auto!important;width: 100%" clear >
<ion-item style="background: rgba(0,0,0,0);">
<ion-icon name="car" item-left></ion-icon>
<h1>Title 1</h1>
<p>Subtítulo</p>
<ion-icon name="person" item-right></ion-icon>
</ion-item>
</button>
<button ion-button style="height: auto!important;width: 100%" clear>
<ion-item style="background: rgba(0,0,0,0);">
<ion-icon name="person" item-left></ion-icon>
<h1>Title 2</h1>
<p>Subtítulo</p>
<ion-icon name="car" item-right></ion-icon>
</ion-item>
</button>
</ion-list>
For IONIC 4 you can now use like this:
Make sure you div position is relative.
<div
ion-activatable
class="ion-activatable"
style="position:relative;height:100px;width:100%;background:blue;">
<ion-ripple-effect></ion-ripple-effect>
Content here...
</div>
:)
Related
Tell me please how to use the material-components-web to implement this pattern:
Link on Material.io
#PavelB answer's has a minor problem on smaller screens, namely smartphones. The main section overlaps the content of the navbar.
Each .mdc-toolbar__row has a height of 64px on tablets and smartphones, but on smartphones its height is 56px.
This can be solved using media queries, like this:
.demo-toolbar {
margin-bottom: -192px;
}
#media (max-width: 599px) {
.demo-toolbar {
margin-bottom: -168px;
}
}
EDIT: here's the edited pen.
Solved this problem as follows:
CSS
.demo-toolbar {
margin-bottom: -190px;
}
HTML
<header class="mdc-toolbar demo-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
</header>
https://codepen.io/anon/pen/jmwgjQ
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example
When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still working properly in 2). My best guess is that this must have something to do with Bootstrap's new .img-responsive class.
The issue can be seen here: http://jsfiddle.net/68qxE/2/ (just be sure to expand the width of the result), but if you'd prefer:
Here is my HTML:
<div class="container">
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" />
</div>
</div>
Here is my Javascript:
$(document).ready(function(){
var $container = $('.container');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.post-box',
columnWidth : '.post-box',
transitionDuration : 0
});
});
});
And here is my CSS:
.img-thumbnail {
padding: 10px;
}
.post-box {
margin: 15px 0 15px 0;
}
Now when the page is originally loaded, and before any of the javascript takes place, the width of col-lg-4's are 350px. But as soon as the javascript is called, the width of the col-lg-4's jumps up to 360px, which I believe is what's causing this to go from a 3-column layout down to a 2-column layout.
The answer was further discussed and solved here: https://github.com/desandro/masonry/issues/405
I don't think it's caused by imagesLoaded. The issue is that there's a padding on .container.
Why don't you just reset that to 0?
.container {
padding: 0px;
}
if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.