How to align a button right in Materialize card-action - materialize

I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?

It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>

You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>

Related

Why is my bootstrap v3 column not 100% wide on my mobile phone?

I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content

bootstrap 3 grid not side by side but below

I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">

How to vertical align text next to image

JSFiddle
<div class="container">
<img style="margin: 10px;" src="~/Content/Images/x.png" alt="" width="400" />
<span style="margin-left: 50px;" class="h3" >Connecting People & Businesses Since 1992</span>
</div>
The above displays just fine in a desktop browser. However, when viewed on a mobile device, the text that should remain to the right of the image wraps underneath the image.
<div class="container">
<img class="col-md-6" src="~/Content/Images/x.png" />
<span class="col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>
So how do I Bootstrap this? I have tried using a col-md-6 class, but the text on the right no longer is vertically centered after using the grid.
<div class="container">
<img class="col-xs-6 col-md-6" src="~/Content/Images/x.png" />
<span class="col-xs-6 col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>
col-md-6 means that everything above 'tablet' size is using 6 out of 12 columns. and everything below that size will revery to the full 12 of 12 because you did not specify anything [thats what you want except you want it all the way down to 'xs' size.
Does that help?
You can use a simple two column table.
Apply "vertical-align:middle" to the td element.

Adding many buttons to header in JQuery Mobile

I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html

Multiple buttons on right hand side of Header

I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?
The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
//have your button here
</div>
Hope this helps.
This is how I did it, seems clean.
HTML
<div id="myHeader" data-role="header" data-theme="a">
<span class="ui-title"></span>
<div class="ui-btn-right">
<a id="myButton1" class="headerButton" href="#" data-role="button"></a>
<a id="myButton2" class="headerButton" href="#" data-role="button"></a>
</div>
</div>
CSS
.headerButton {
float: left;
margin-right: 5px!important;
}
I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar
You can use the grid class.
<div class="ui-grid-a ui-btn-right">
<div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
<div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
<a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left
ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel"
data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Cancel</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>