In the project that i am making i used ion-scroll two times and works perfect (vertical mode) but now i am trying to do an horizontal scroll and is not working, the scroll appear but i can't scroll nothing.
The HTML code is simple:
<ion-scroll direction="x" class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</ion-scroll>
and CSS:
.box {
width: 60vw;
height: 10vh;
border: 1px solid black;
}
.box > * {
display: inline-block;
margin-right: 4vw;
width: 20vw;
height: 10vh;
background: red;
}
Any suggestion? i am doing something wrong? i am missing something?
Thanks in advance
View this codepen example, edit it and change it to your style.
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.data = {
isLoading: false
};
}]);
.wide-as-needed {
overflow: scroll;
white-space: nowrap;
}
.scroll {
min-width: 100%;
}
.bar.bar-loading {
display: block;
height: 24px;
/* starts right below a normal header */
top: 44px;
/* make the text centered vertically and horizontally */
text-align: center;
padding: 0;
line-height: 24px;
/* transition 'sliding down' (check below)*/
-webkit-transition: 200ms all;
}
/*
* make the content's top changes animate.
* might not always look good, but looks
* good when our loader is added & removed
*/
.has-header {
-webkit-transition: 200ms top;
}
.has-header.has-loading {
/* 44px (header) + 24px */
top: 68px;
}
/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
height: 0;
border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
height: 24px;
border-width: 1px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<ion-header-bar class="bar-subheader">
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
<a class="button">this is a button : 7</a>
<a class="button">this is a button : 8</a>
<a class="button">this is a button : 9</a>
<a class="button">this is a button : 10</a>
<a class="button">this is a button : 11</a>
<a class="button">this is a button : 12</a>
<a class="button">this is a button : 13</a>
<a class="button">this is a button : 14</a>
<a class="button">this is a button : 15</a>
<a class="button">this is a button : 16</a>
</ion-scroll>
</ion-header-bar>
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
Loading...
</div>
<ion-content ng-class="{'has-loading': data.isLoading}">
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
</ion-content>
</body>
</html>
I had the same problem- horizontal scroll worked fine on iOS but not at all on android. It seems this is a bug with ionic:
https://github.com/driftyco/ionic-v1/issues/193
I'm using ionic 1.3.2, but it looks like it's still an issue in 2.x as well.
I was able to fix it by adding adding overflow-scroll="false" to the ion-scroll element.
Related
I'm working on a site built on bootstrap and have a column down the right side that contains a search module and some other things. it gets hidden on smaller screens. I'm hoping to restore just the search module (and hide everything else but the footer) when pressing a button that gets displayed in the menu.
It sounded simple, but I can't seem to figure out how to override it being hidden. The visibility is set in the style sheet but I also tried setting the visibility on the div itself with d-none d-lg-block - no go.
With below code, when hitting the button, the main container hides (though sometimes only when pressing it twice) but it doesn't restore the sidebar. Which, based on the different things I've tried appears to be as intended, just not what I'm trying to do with it..
I'm sure it's something simple, but I've been staring at this for far too long and I'm not doing well with googling. Thanks in advance for any help/suggestions.
Update: The comment confirming it was out of the realm of bootstrap helped a lot. Updated code below to use javascript to handle activating the search module and hiding the main content. a simple function only goes one way, so I am also hiding the search button itself on click and displaying a close button that reverses the actions. The next step was to reset everything if the page width changes (as this function is only intended to be for smaller screens/mobile, and if you action any of the buttons and then increase page width things stay hidden that shouldn't) so I added a third function that listens for page width changes and resets the visibility of the impacted divs when the size becomes large enough to properly display. it's working in testing, but I'm open to feedback, tips, etc. to make it better.
My sincere thanks to all who have helped me get here!
```
/* Set gray background color and 100% height */
.sidebar {
padding-bottom: 10px;
background-color: #f1f1f1;
text-align: center;
justify-content: center;
}
/* this adds padding to bottom of main container in order to account for footer image */
.pb-6 {
padding-bottom: 5rem !important;
}
/* hides this div on small size */
#media screen and (max-width: 768px) {
div.sidebar {
display: none;
}
div.footerimage {
display: none;
}
}
#media (min-width: 768px) {
/* hides hamburger on bigger screens */
.navbar-brand{
display: none;
}
.navbar-search{
display: none;
}
.navbar-pressed{
display: none;
}
}
/* Set black background color, white text and some padding */
footer {
background-color: #000;
color: #fff;
padding: 15px;
margin:0;
}
body {
margin: 0px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
/* images scales */
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
padding: 0px;
margin: 0px;
}
.header {
background-image: url();
background-size: cover;
background-color: #ffffff;
color: #000000;
padding:0;
margin:0;
text-align: center;
width: auto;
height: 100%;
line-height:0;
}
.navbar-pressed {
display: none;
}
.footerimage {
position: relative;
}
.footerpic {
background-image: url();
background-size: contain;
content: '';
height: 200px;
pointer-events: none;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
width: 200px;
}
/* change the background color */
.navbar-custom {
background-color: #1e73be;
margin-bottom: 0;
border-radius: 0;
padding: 0;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #ffffff;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #ffffff;
}
/* change the color of navbar title when collapsed */
.navbar-toggler {
color: #ffffff;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
background-color: #035a9e;
}
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
background-color: #1e73be;
}
/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
color: #ffffff;
}
/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
color: #ffffff;
background-color: #035a9e;
}
.navbar-brand img {
height: 30px;
float: left;
margin-left: 20px;
padding: 0;
}
```
```
<!DOCTYPE html><html lang='en'><head><title>menu test</title><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css'><link rel='preconnect' href='https://fonts.gstatic.com'><link href='https://fonts.googleapis.com/css2?family=Atma:wght#600&display=swap' rel='stylesheet'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
<script>
function myFunction() {
document.getElementById("maincontainer").style.display = 'none';
document.getElementById("sidebar").style.display = 'block';
document.getElementById("sidecontentdiv").style.display = 'none';
document.getElementById("navbar-search").style.display = 'none';
document.getElementById("navbar-pressed").style.display = 'block';
}
</script>
<script>
function myCloseFunction() {
document.getElementById("maincontainer").style.display = 'block';
document.getElementById("sidebar").style.display = 'none';
document.getElementById("sidecontentdiv").style.display = 'block';
document.getElementById("navbar-search").style.display = 'block';
document.getElementById("navbar-pressed").style.display = 'none';
}
</script>
<script>
function doSomething(matches) {
if (matches) {
// media query matches
} else {
// media query does not match
document.getElementById("maincontainer").style.display = "";
document.getElementById("sidebar").style.display = "";
document.getElementById("sidecontentdiv").style.display = "";
document.getElementById("navbar-search").style.display = "";
document.getElementById("navbar-pressed").style.display = "";
}
}
const query = window.matchMedia("(max-width: 767px)");
query.addEventListener("change", ({ matches }) => doSomething(matches));
doSomething(query.matches);
</script>
</head>
<body>
<div class='header'></div>
<nav class='navbar navbar-expand-md navbar-custom sticky-top'><div class='navbar-brand'><a href='https://www.url.com'><img src='/images/menu.png' alt='Logo'></a></div><div id='navbar-pressed' class='navbar-pressed ml-auto'><button class='navbar-toggler' type='button' onclick="myCloseFunction()"><i class='fa fa-circle-xmark fa-flip-horizontal' style='color:#ffffff'></i></button></div><div id='navbar-search' class='navbar-search ml-auto'><button class='navbar-toggler' type='button' onclick="myFunction()"><i class='fa-solid fa-magnifying-glass fa-flip-horizontal' style='color:#ffffff'></i></button></div><button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarCollapse'><span class='ml-auto' role='button'><i class='fa fa-bars' style='color:#ffffff'></i> Menu</span></button><div class='collapse navbar-collapse justify-content-between' id='navbarCollapse'><div class='navbar-nav'>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div></div>
</div></nav>
<div class='container-fluid text-center'>
<div class='row content'>
<div class='col-md-9 text-left pb-6' id='maincontainer'>
main body of page
</div>
<div id='sidebar' class='col-md-3 sidebar'>
<div id='searchdiv'>
<div class='sidebarheader rounded'><h4>Search:</h4></div>
<div class='searchbox rounded'>search module</div>
</div>
<div id='sidecontentdiv'>
<div class='sidebarheader rounded'><h4></h4></div>
<div class='searchbox rounded'>unimportant module</div>
</div></div>
<footer class='container-fluid text-center'>
<div class='row'>footer text</div>
</footer>
</div></div>
</body></html>
```
If it's simply hide/show div, why not use JavaScript / jQuery? Like,
<button onclick="myFunction()">src</button>
<div id="attid"></div>
<script>
function myFunction() {
document.getElementById("attid").style.display = 'none';
// or to show
// document.getElementById("attid").style.display = 'block';
}
</script>
Couldn't comment because lack of reputation :)
I think this will help you! Joe
const opener = document.getElementById('opener');
const sidebar = document.getElementById('sidebar');
const closer = document.getElementById('closer');
opener.onclick = function(){
sidebar.style.marginRight = 0
}
closer.onclick = function(){
sidebar.style.marginRight = 'calc(var(--length) * -1)'
}
body{
overflow:hidden;
}
#sidebar{
--length:280px;
margin-right:calc(var(--length) * -1);
width:var(--length);
transition:all .2s linear;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<button class="btn btn-primary" id='opener'>opener</button>
<div id = 'sidebar' class="d-flex d-md-none float-end flex-column flex-shrink-0 p-3 bg-light">
<div class="d-flex">
<button class="btn btn-primary" id='closer'>x</button>
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Sidebar</span>
</a>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
<ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
I develop Django apps and need to customize standard form for data entry that fit the structure in attached image bellow.
You can also see my current code that "do the job" but would like to know if it is the good way to do that or if there is better practices.
I have define css classes for my fixed heading-title, fixed footer-bottom and for my 2 buttons "Save" and "Cancel"
html
<nav class="navbar navbar-expand-md navbar-dark bg-info fixed-top" style="padding-top: 50px;">...</nav>
<!-- content form for field data entry -->
<div class="box row-full" id="heading-title">
<h3>Nouveau projet</h3>
</div>
<div class='container' style="margin-top:200px;margin-bottom:200px">
<form id="projecteditform" method="POST" class="post-form">
{% csrf_token %}
{{ form|crispy }}
<button id="ajouter_projet" class="btn btn-info .fixed-save" type="submit"
style="width: 100px; z-index:2">Valider</button>
<a data-modal data-target="" class="btn btn-dark .fixed-cancel" href="{% url 'project:index_projet' %}"
style="width: 100px; z-index:2">Annuler</a>
</form>
</div>
<div class="box row-full" id="footer-buttons"></div>
<!-- end content form for field data entry -->
<footer class="page-footer font-small blue fixed-bottom" style="background-color:white; z-index:1">...</footer>
css
.box {
width: 100px;
max-height: 60px;
color: white;
}
#heading-title {
position: fixed;
padding-top: 20px;
top: 100px;
color:black;
background: white;
}
#footer-buttons {
position: fixed;
bottom: 50px;
background: white;
}
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
text-align: center;
height: 100px;
left: 50%;
}
.fixed-save{
position: fixed;
bottom: 80px;
}
Thanks for your advices
In css recommended to use the id selector only for JavaScript.
Incorrect:
#footer-buttons
#heading-title
Correct:
.footer-buttons
.heading-title
It is not recommended to use inline styles in html.
Incorrect:
style = "margin-top: 200px; margin-bottom: 200px"
Correct:
.someclass { top-margin: 200px; bottom-margin: 200 pixels }
It is recommended to use the section and header tags.
http://htmlbook.ru/html/section
http://htmlbook.ru/html/header
It is not recommended to use different quotation marks. The code looks dirty.
Use "or '
Correct:
class = "container"
The dot is not needed here.
class = "btn btn-dark .fixed-cancel"
According to what I found django-widget-tweaks is one of the best ways to format django forms
See this
I am developing a web application using Material Design Lite.
One of the requirements is this: A sidebar exists such that by default, it will display the icons of the menu items at a smaller width (say 50px). Clicking on the menu (hamburger) icon then expands the drawer to a larger size and shows not only the icons but the text beside them. Here is an example of what I want to achieve:
Default:
Expand:
Here is my current HTML:
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">menu</i>
</button>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">apps</i>
</button>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">account_circle</i>
<span>Account</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">home</i>
<span>Home</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">assignment</i>
<span>Reports</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">input</i>
<span>Logout</span>
</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
#RenderBody()
</div>
</main>
</div>
</body>
Is there a good/correct way of doing this? I was wondering how this could be done and haven't come up with a good solution.
Have a look at this answer. I think it's a good approach to achieving this effect.
You can then just drop the polyfill in and write in your CSS something like:
.mdl-navigation .material-icons {
opacity: 0;
transition: 250ms opacity ease-in-out;
}
.mdl-navigation[min-width~="200px"] .material-icons {
opacity: 1;
}
If you think a polyfill is too much to add just this functionality I can think of one other way that doesn't use any javascript, but it wouldn't be as flexible with regards to how you animate the showing/hiding should you want to animate it. It involves overlapping the main content area over the drawer. Give me a moment and I'll mock up a demo.
EDIT
Here's what I was thinking as far as a non-js approach (still requires some for the toggling of the is-expanded class): https://jsfiddle.net/damo_s/27u4huzf/2/
.mdl-layout__drawer {
transform: translateX(0);
z-index: 1;
box-shadow: none;
border-right: 0;
&.is-expanded {
+ .mdl-layout__header {
margin-left: 240px!important;
&:before {
width: 0;
left: 200px;
}
}
~ .mdl-layout__content {
margin-left: 240px!important;
&:before {
width: 0;
left: 200px;
}
}
}
}
.mdl-layout__header,
.mdl-layout__content {
margin-left: 55px!important;
}
.mdl-layout__header {
z-index: 2;
&:before {
background: #fff;
content: '';
display: block;
position: absolute;
width: 15px;
height: 100%;
left: 40px;
}
}
.mdl-layout__header-row {
padding: 0 16px 0 22px;
}
.mdl-layout__content {
background: #878787;
}
.mdl-layout__drawer-button {
display: none;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
background-color: transparent;
}
On looking at it now, I don't think it's a very good approach (for a number of reasons you might notice playing around with it), but I'll leave it here just in case anyone wishes to improve upon it.
EDIT 2
I modified the previous demo to simplify it and allow for opening/closing animation. I don't know if at this point you'd exactly be doing things the "Material" way but I think it's workable and better anyway than my previous attempt. Demo: https://jsfiddle.net/damo_s/Ln6e4qLt/
.mdl-layout__drawer {
overflow: hidden;
width: 55px;
transform: translateX(0);
transition: 250ms width ease-in-out;
.mdl-navigation__link span {
opacity: 0;
transition: 250ms opacity ease-in-out;
}
+ .mdl-layout__header,
~ .mdl-layout__content {
transition: 250ms margin-left ease-in-out;
}
&.is-expanded {
width: 240px;
.mdl-navigation__link span {
opacity: 1;
}
+ .mdl-layout__header,
~ .mdl-layout__content{
margin-left: 240px!important;
}
}
}
.mdl-layout__header,
.mdl-layout__content {
margin-left: 55px!important;
}
.mdl-navigation {
width: 240px;
}
.mdl-layout__header-row {
padding: 0 16px 0 22px;
}
.mdl-layout__content {
background: #878787;
}
.mdl-layout__drawer-button {
display: none;
}
This cannot be done by pure CSS. You have have to use jQuery. Something like this
$('#hamburger-button').on('click',function() {
$('#menu .links').css('display','block');
});
Assuming you have hidden links by display:none.
If you can post here your css and html code I can help with specific example.
I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.
<style>
.backdrop{
background-color: purple;
}
</style>
Following is sample working code snippet for 4 buttons which show tooltip.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS for tooltip-->
<style>
.backdrop{
background-color: purple;
}
</style>
</head>
<body class="row">
<div class="col s12" >
<div class="col s12"> <h4> Click following</h4> </div>
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="top" data-delay="150" data-tooltip="I am tooltip"> Top</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="left" data-delay="250" data-tooltip="I am tooltip"> Left</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="right" data-delay="550" data-tooltip="I am tooltip"> Right</a>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>
Tooltips appear like this in materialize:
I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}
You can customise a tooltip with the following css (Materialize 1.0.0)
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
font-family: "Roboto Mono";
font-size: 0.8em;
font-weight: 700;
}
To specify diffrent color for each tooltip you can do it like this:
while initializing tooltips add this function:
$('.tooltipped').tooltip({delay: 50}).each(function () {
var background = $(this).data('background-color');
if (background) {
$("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
}
});
and then on your tooltip specify it like this:
<a href="#!" class="tooltipped"
data-position="bottom"
data-delay="50"
data-tooltip="I'm a tooltip"
data-background-color="red lighten-3">
as you can see I'm changing the class attribute so you can use materialize-css colors
I solved it like this
$('.tooltipped').tooltip({delay: 50});
.material-tooltip .backdrop{
background-color: #DB0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" >
Test Tooltip
</div>
For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content
like this (sass):
.material-tooltip
background-color: white
border-color: gray
border-style: solid
border-width: 1px
.tooltip-content
padding: 3px
font-size: .8rem
background-color: transparent
color: #000
max-width: 250px
Updated Answer for 1.0
To style the tooltip's background etc:
.material-toolip {
background:#000;
}
To style the actual text within the tooltip use the following:
.material-tooltip .tooltip-content
{
font-size:12px;
}
I have a JQuery Mobile listview with a custom item height (50px). Whenever the item is clicked, its height changes. How can I fixate the custom height?
Fiddle: http://jsfiddle.net/3gnvhxth/6/
I am using JQuery Mobile v1.45 and JQuery 1.11.1.
Before click:
After click:
HTML:
<ul data-role="listview" data-inset="true">
<li class="custom_item">
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image1">
Click Item 1
</a>
</li>
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image2">
Click Item 2
</a>
</li>
<li class="custom_item">
<a class="custom_link" href="http://google.com" target="_blank">
<img class="custom_image" src="http://placehold.it/120x120&text=image3">
Click Item 3
</a>
</li>
</ul>
CSS:
.custom_item {
height: 50px;
max-height: 50px;
}
.custom_link {
padding-left: 50px !important;
height: 50px;
max-height: 50px;
}
.custom_image {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
}
Luis is right about the min-height from the jQM CSS file. You need to override it, but also remove top and bottom padding on the link as that causes the height issue on click:
.custom_link {
padding-left: 50px !important;
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
max-height: 50px;
min-height: 0 !important;
height: 50px;
}
Updated FIDDLE
Setting line-height keeps the text vertically centered. If that is not important to you, just remove it.
You have a default min-height in your css that causing the problem
CSS
.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
min-height: 3.625em; // Remove this or adjust to your needs
padding-left: 6.25em;
}