https://youtu.be/4071R5ONUHE
Please see this video.
https://materializecss.com/floating-action-button.html
I want FAB to Toolbar. Just like the documentation. But when I am using the code, it is behaving like the video. With scroll it is going to collapse. No button is showing on toolbar. Just a Edit button.
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
jQuery Code:
$(document).ready(function(){
$('.fixed-action-btn').floatingActionButton({
direction: 'left',
toolbarEnabled: true,
hoverEnabled: false
});
});
According to documentation, Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the toolbar class to the FAB.
Change this:
<div class="fixed-action-btn">
To:
<div class="fixed-action-btn toolbar">
Related
I am using beercss and alpinejs I need did dropdown menu, but it's width is smaller than it's context.
<nav class="wrap">
<div class="tabs right-align">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a x-data="{ active: false }">
<button #click="active = !active">
<span>Login</span>
<div x-show="active" class="dropdown">
<a>
<label>Complementary text</label>
</a>
</div>
</button>
</a>
</div>
</nav>
How to fix it?
https://codepen.io/bubnenkoff/pen/VwMmEgb
Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").
I'm building a static site with Fomantic-UI (Semantic-UI). When I created my menus, but before I wired them up to links, I noticed that the text of the dropdown link item changed when one of the submenu items was selected. Neat! But since I'm not using anything that preserves state, that change is not sustained, now that the links take you to a new page. I'm fine with that, but I don't like how the text changes briefly before the browser loads the new page. I would like to eliminate that change altogether.
Or, if there's a way to maintain that change on the new page, I'd be fine with that too.
Thanks!
Edit: Here's my code, but the fix will have to reference the framework's JS.
<div class="ui dropdown link item">
<span class="text" role="group">Group 1</span>
<i class="dropdown icon"></i>
<div class="menu submenu">
<div class="header">Services</div>
<a class="item" href="#">Item 1</a>
<a class="item" href="#">Item 2</a>
<a class="item" href="#">Item 3</a>
</div>
</div>
JSFiddle
#gwyndall If you don't want to update the current text when you click the menu item. You can use action property with select in dropdown settings.
$('.ui.dropdown').dropdown({ action: 'select' });
Source: https://github.com/fomantic/Fomantic-UI/issues/1676#issuecomment-693587926
I am trying to get a sidemenu to work on Materialize when should be very simple:
First I add the sidenav content to the page:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Then I add the jquery code:
$( document ).ready(function() {
$('.sidenav').sidenav();
});
And finally the part where to problem is:
I have a nav which goes at the top of the page:
<nav>
<div class="nav-wrapper">
<img src="icon.png" alt="" />
<ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
<li>Trigger SideNav</li><!-- This is just not showing -->
</ul>
</div>
</nav>
For some reason this menu is not showing:
<li>Trigger SideNav</li>
unless I take this off it ... data-target="slide-out" class="sidenav-trigger"
How can I fix this?
In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.
Something like:
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Info</li>
</ul>
</div>
</nav>
as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.
If it does not work:
I think the problem can be with the content of your link. replace the image with a text and try again.
For reputation reasons, I'm not allowed to comment. It'll work with the javascript code
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});
Instead of the code which is given in the official documentation you've to change this piece of code
M.Sidenav.init(elems, options);
with this
M.Sidenav.init(elems, {});
With the official javascript code you'll notice that there's an error in the console when you load the page.
I'm trying to make tabbed comments section for WordPress. I use jQuery UI tabs to make it work. I have styled radio switches between tags but it does not works. When I click a tab, link click happens and radio button does not change.
my code for first <li> element looks like this:
<li class="active ui-state-default ui-corner-top ui-tabs-active ui-state-active" id="comments-evolved-Facebook-control" role="tab" tabindex="0" aria-controls="comments-evolved-Facebook-tab" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<a href="#comments-evolved-Facebook-tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">
<div class="switch switch-Facebook">
<input name="multicomments" id="Facebook-toggle" class="switch-control" type="radio">
<label class="switch-toggle" for="Facebook-toggle">
<div class="switch-handle"><span><i class="icon-multicommentsFacebook"></i></span>
</div>
</label>
</div><span id="comments-evolved-Facebook-label">Label Example</span>
</a>
</li>
see actual WordPress page: Page with comments
Solved! Here is the jQuery code I added.
jQuery('#".$tab."').click(function() {
jQuery('#".$tab."-toggle').prop('checked', true);
});
`".$tab."` is the `<li>` element ID
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active" href="/">link</a>
<a class="mdl-navigation__link is-active" href="/">link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active" href="/">link</a>
<a class="mdl-navigation__link is-active" href="/">link</a>
</nav>
</div>
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
According to http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ it should work as long as I call componentHandler.upgradeDom() after I dynamically load the html. Just to make sure I'm calling the upgradeDom correct I added the button to see if the ripple effect is added. And the button is updated but the hamburger icon is not appearing.
If I inline the html the hamburger icon appears.
Since you are dynamically load the html, you should run the following inside your init function after the DOM is load. Notice that the setInterval function to ensure DOM has enough time to load before executing the componentHandler method
jQuery
$(document).ready(function() {
setInterval(function() {
componentHandler.upgradeAllRegisteredElements();
}, 1000);
});
DOM API
document.addEventListener('DOMContentLoaded', function() {
setInterval(function() {
componentHandler.upgradeAllRegisteredElements();
}, 1000);
});