I can't find any tile component in MDL on getmdl.io. The card component is well documented, but not the tile component.
I assume you mean Grid Lists instead of tiles. As far as I can tell there is no tile specification.
If this is the case, then you would need to combine the grid component and cards. This would get you most of the way there with a little extra custom code for card sizing and maybe shifting a few other bits around if needed.
I found something great when going through codepen the other day: http://codepen.io/zavoloklom/pen/wtApI.
<a class="tile tile-lg tile-sqr tile-red ripple-effect" href="#">
<span class="content-wrapper">
<span class="tile-content">
<span class="tile-img" style="background-image: url(http://www.google.com/design/images/design-minutes.png);"></span>
<span class="tile-holder tile-holder-sm">
<span class="title">Design Minutes</span>
</span>
</span>
</span>
</a>
If you want to take your own approach.I suggest learning about the cell item and moving on from there: http://mdlhut.com/2015/07/understanding-the-mdl-grid/
Related
I have bootstrap columns set up with photos and a brief description underneath. Because the photos are different heights the text isn't aligned across the columns and it looks pretty bad. I'm sure this is a simple fix but I just can't seem to find it! Thanks in advance
<div class="row colabs">
<div class="col-lg-6 col-12">
<h2>Megan Reitz</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\megan-reitz.jpg" alt="">
<p class="collab-texts">Long standing research partner into 'speaking truth to power' and 'workplace activism'</p>
<a class="collab-links" href="http://www.meganreitz.com/">http://www.meganreitz.com/</a>
</div>
<div class="col-lg-6 col-12">
<h2>Mark Cole</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\Mark-Cole.jpg" alt="">
<p class="collab-texts">Fellow explorer into the intellectual headwaters of current organizational and management practice</p>
<a class="collab-links" href="https://radicalod.org/">https://radicalod.org/</a>
</div>
</div>
enter image description here
In this you can go for any one below described solution
try to use bootstrap-5 inbuilt classes like "img-fluid"..etc
reference link :- https://getbootstrap.com/docs/5.0/content/images/
either you can set your images to one div as background and use properties like background-position, background-size .. etc
you can set apply common height/width for all image elements with this you can control images & after that texts of it..
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
Simple question, but probably a hard answer. I'm doing an Angular 5 app which has multiple components. These are two of them:
ChartPicker
<div>
<span>
<div class="btn-group btn-group-small" *ngIf="available_charts.chart_types.length > 1">
<label *ngFor="let type_key of available_charts.chart_types" class="btn btn-default active" [class]="type_key.name == available_charts.chart_types.selected ? 'active' : ''" (click)="available_charts.selected = type_key.name">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</label>
</div>
</span>
</div>
GranularityPicker
<div>
<span>
<select [(ngModel)]="config.granularity.selected">
<option [selected]="false" *ngFor="let option of config.granularity.available" [ngValue]="option">
<span class="option-txt"> {{option}} </span>
</option>
</select>
</span>
</div>
Both are quite easy... right? Well, I put them in the app like this, with another component called segments which is located at the left side of the page:
<segments [config]="config"></segments>
<chart-picker [config]="config" class="chart-picker"></chart-picker>
<granularity [config]="config" class="granularity-picker"></granularity>
Chart-picker is before granularity, and the CSS of both classes have some margin to the right side, and a float:right.
... but the chart-picker, the one which should be first, appears the last, at the right of the granularity one.
This makes absolutely no sense. And it doesn't matter what I try to change it the CSS... it just won't work. Any ideas on how to fix this?
Both elements have float:right. The floats are calculated in document order, so the first element ends up floating all the way to the right, then the second one floats next to the first, leaving them in the "wrong" order. You probably want to be using inline or inline-block elements instead of float here.
.r {float:right}
<div class="r">First</div>
<div class="r">Second</div>
Is there any way to tell an assistive tool to treat an element (e.g: <div>) as a whole, and not split it in child elements?
First example
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
Second example
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1ยบ</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a> tag as the second line. The second line gets broken up by VoiceOver but the <a> tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.
I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?
For example I use a template like this:
<ion-view view-title="HelloWorld">
Now I want that Hello appears in red color and world in white color.
My main problem is that I can't get an access via css to the view-title.
Try this,
<ion-view>
<ion-nav-title>
<span style="color:red">Hello</span>World
</ion-nav-title>
</ion-view>
This solves the problem of modifying the view-title:
<ion-nav-title>
<span class="red">Hello</span>World
</ion-nav-title>
In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).
<ion-nav-title>
<div>
<span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
Your App Title
</div>
</ion-nav-title>