I am using Materializecss for my website and I'd like to display tooltips on the smaller action buttons whenever the user presses the big action button. Materializecss shows tooltips only on hover by default.
Is there a way to change this?
Thank you
<li> <!-- Small button -->
<a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Add friends">
<i class="material-icons">add</i>
</a>
</li>
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>
Related
So, I'm adding a popup menu off the header and it works... works quite well actually except for one small thing. For the life of me I can't get it to display the icons the way I want them!
In the first <li> I brute force the data-icon into the <li> and it shows but its not positioned to the left. In the others, I left the data-icon where I'm accustomed to leaving them (where they work correctly everywhere else) and they don't display at all.
Any suggestions?
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li data-icon="gear" data-iconpos="left">Settings</li>
<li>GPS</li>
<li>About</li>
</ul>
</div>
</div>
<!-- /header -->
JSFiddle
The data-iconpos attribute not defined for regular list items, works only when the < li> item is inside a navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Please, take a look to the fiddle I made: https://jsfiddle.net/xbo8npng/1/
I have placed the icons to the left using css:
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li class="left" data-icon="gear">Settings</li>
<li class="left">GPS</li>
<li class="left">About</li>
</ul>
</div>
</div>
and the styles:
.left a{
padding-left: 2.5em !important;
padding-right: 1em !important;
}
.left a:after{
left: 2px;
right: auto;
}
I hope this helps you!
Seems I can't put the icon correctly, can someone help me out?
JQuery Mobile version: 1.4.2
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p><img class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'/> Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released in 2004.</p>
</a>
</li>
</ul>
</div>
</div>
Result:
I try to use this but doesn't work.
<span><i class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'>Text</i></span>
If you want the icon inline with the text and not a button, you can accomplish it like this.
First add a span for the icon with class="ui-icon-home ui-btn-icon-notext inlineIcon":
<p>
<span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span>
Google Chrome is a free, open-source web browser. Released in 2008.
</p>
Then we add the folowing CSS:
li p {
line-height: 24px;
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The P line-height makes room vertically for the icon, while the inlineIcon class places the icon correctly.
If you do not want the gray disk and would prefer a plain black version of the icon, you would add the ui-alt-icon class to the span to make it black, and the CSS would be:
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
Here is a DEMO
And a screenshot:
Try this code it will work
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png"/>
<h2>Google Chrome</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%;"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;"> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p></div></div>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png"/>
<h2>Mozilla Firefox</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;padding-bottom:5%;"> <p>Firefox is a web browser from Mozilla. Released in 2004.</p></div>
</div>
</a>
</li>
</ul>
</div>
</div>
Refer this Fiddle Demo
I want to create links to pages in my website when a user clicks on a slideshow picture generated with bxSlider (which is excellent in every other way)
Can this be done? How? Thanks
I use something like this:
<li>
<div class="item-img2">
<a style="background-image: url('picture.jpg');" href="http://www.google.com"></a>
</div>
</li>
And in CSS
.item-img2 {
width:980px;
height:500px;
}
.item-img2 a {
display:block;
overflow:hidden;
width:980px;
height:500px;
background-position:center center;
background-repeat:no-repeat;
}
Just add an a href... for exemple:
<ul class="bxslider">
<li><img src="images/slide001.jpg"/></li>
<li><img src="images/slide002.jpg"/></li>
</ul>
So this seems like a dumb problem to have. I may be going about it wrong so if anyone could suggest another way of doing this i would love to try it out.
I have a FIXED Navigation bar built with Zurb Foundation 4
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ) + "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
The image that is displayed for the title is larger than the navigation bar. I actually like it hanging down from the nav bar and i have a media query setup to remove it on smaller screens so it is not hanging over content.
Problem: The <div class= "fixed"> wraps the navigation bar and the image all the way across the page. Because the image hangs below the nav bar anything behind it is not clickable. the entire top part of the page is unclickable. For a form i am unable to select a text box to edit. Because the navbar is fixed it affects the entire page depending on how far you have scrolled. Is there a way to have them fixed but without having the fixed tag grab all the empty space? Is there another way to do this?
Try adding position: relative; to your image.
I did Solve this after much research.
here is the code to solve the issue or at least what i hacked together to get what i want.
This is the navigation bar.
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
</section
</nav>
</div>
<div class= "fixed-icon">
<%=link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ), root_path %>
</div>
I separated the icon and the Text but kept both of them as links to the home page. Giving the illusion that they are both part of the title. There is a media query that hides the image and removes the margin on the title.
And Here is the CSS. I basically searched around the html and css files of the site until i found the "fixed" class and stole the css modification and then changed the width to be small so it does not mask everything else.
#media only screen and (min-width: 768px) {
.title-area {
margin-left: 6em;
}
}
.fixed-icon {
#extend .hide-for-small;
width: 10%;
left: 0;
position: fixed;
top: 0;
z-index: 99;
}
.title-area {
padding: 5px 5px;
font-weight: bold;
letter-spacing: -1px;
}
I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)
The html is generated by nokogiri
<nav class="pagination">
<span class="first">
« First
</span>
<span class="prev">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>
<span class="page">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>
<span class="page current">
2
</span>
<span class="page">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">3</a>
</span>
<span class="page">
4
</span>
<span class="next">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ›</a>
</span>
<span class="last">
Last »
</span>
</nav>
I want something like pagination in bootstrap page, how I can do?
Please help!
After I posted this question I found the solution:
kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.
Just go to the console and type:
rails generate kaminari:views bootstrap4
It will download some Haml files to your application, and the views are changed. It also supports bootstrap 2 and 3 e.g
rails generate kaminari:views bootstrap3
Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes
simply add following css to your application.css
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}
rails generate kaminari:views bootstrap4
Available themes: bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui
Nearly gave up until I found "Pagination with Kaminari".
In short, after rails g kaminari:default go into the views that are created under app/views/kaminari and change the tags to suit your styling.
I went into _paginator.html.erb and changed the <nav> to a <div> and replaced all the <span> tags with <li>.
To get the bootstrap styling that fits my app, I changed the <div> tag in _paginator.html.erb to <div class="pagination pull-right"> and the <span class="page"> tags to simple <li>.
There's are a couple of gotcha's that perhaps someone else can help with:
There's erb in _page.html.erb that changes the class for the current page when active. It messes up the alignment so to get around that, change the <%= link_to_unless page.current? ... %> to <%= link_to page ... %>.
The _gap.html.erb view which inserts the "..." block also gets messed up. Replace it with <li><%= link_to '...' %></li> to get it to sit nicely inline.
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.