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
Related
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">
When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu"
What am I missing?
<!-- logo -->
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img src="assets/img/Grayscale_cloud.png">
</a>
<div class="navbar-burger is active" data-target="navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- menu -->
<div class="navbar-menu" id = "navbar-menu">
<div class="navbar-start">
<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>
<a class="navbar-item" routerLink="networksupport">Network</a>
<a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
</div>
</div>
</nav>
`,
I tried the code here to no avail. https://medium.com/#edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1
Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.
there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all
you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted
toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
to get this toggle function to work, you'd have to assign the names in app.component.html
you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
and <a class="navbar-item" href="#"> .... </a> ...which should have
<a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
Also, we had to do npm install bulma
add the css in our angular.json:
"styles": ["node_modules/bulma/css/bulma.min.css" ],
you can check a working sample here
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
With thanks to trevorp the basic side nav bar works perfectly. Then I needed to nest some menu items. This seems logical to me
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#20"><i class="dropdown-toggle"></i>Accounting <span class="caret"></span></a>
<ul class="sub-menu collapse" id="20">
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#21"><i class="dropdown-toggle"></i>Income <span class="caret"></span></a>
<ul class="sub-menu collapse" id="21">
<li>Customers</li>
</ul>
</div>
</li>
<li>Purchases</li>
<li>General Ledger</li>
<li>Banks</li>
<li>Invoicing</li>
<li>Financials</li>
<li>Utilities</li>
<li>Reports</li>
</ul>
</div>
</li>
But it produced this result
That just closes when clicked, instead of opening the li item... It's probably something very basic, but the art of staring at it hasn't produced any results yet :-)
I suspect clicking on the sub menu item is closing the parent, but no idea how to overcome that. No idea why the formatting is totally different either!
Thank you
======================= UPDATE =======================
If the second accordion-group div is removed it takes care for the blank menu item, and disabling the script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
$('.accordion-group .in').collapse('hide');
});
that closes the main menu items when another is opened now gives this result..
That now leaves two questions
How can I select a sub menu item without closing the accordion group?
How can I format the sub menu items in the same colour as the others (white not orange)?
Finally managed to find a way to solve question one
If there is a less verbose method I'd love to hear :-)
Add an onlick method to the sub-menu item
<li class="collapsed active">
<a onclick="holdCollapse();" data-toggle="collapse" data-target="#Menu_21" class="dropdown-toggle collapsed"><i class="fa fa-gift fa-lg"></i>Income </a>
<ul class="sub-menu collapse" id="Menu_21">
<li>Customers</li>
</ul>
</li>
and add a hidden field
<input type="hidden" value="0" id="HiddenField" />
add this script
<script>
function holdCollapse(e) {
$('#HiddenField').val('1');
}
and edit the original script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
var isSubMenu = $('#HiddenField').val();
if (isSubMenu == '0') {
$('.accordion-group .in').collapse('hide');
}
$('#HiddenField').val('0');
});
I use dropdownlist populated with checkboxes, as shown in the picture.
http://pokit.org/get/?7c1ecede2a99c5fc2c15f63baa153dae.jpg
Here is dropdown code, although I think it doesn't matter.
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
#{ int counter = 0;}
#{ string id = "SelectedTypes_" + counter.ToString() + "_";}
#foreach (var rightGroup in Model.RightGroupList)
{
<li>
<label class="checkbox">
<input id="#id" name="SelectedTypes[#counter]" value="#rightGroup.Id" data-value="#rightGroup.Id" type="checkbox" class="input-md minimal" checked />
#rightGroup.RIGHTGROUPNAME
#{ counter++;}
</label>
</li>
}
</ul>
</div>
Dropdown is located in partialview, so it's height is limited by height of that same partialview.
Is there any way for this dropdown to be visible out of bounderies of partialview, I want it to drop down as much as it can. I know it isn't the best solution, but I'll deal with scrolling later.
Could it be done by expanding partialview over entire screen?
Thanks
Edited
Here is HTML code, (all controls are in the same row div)
<div class="row">
<div class="col-md-12 col-lg-12 form-group" id="divRightGroupList">
<div class="dropdown" style="overflow: visible">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" style="overflow: visible" role="menu">
<li>
<label class="checkbox">
<input id="SelectedTypes_0_" name="SelectedTypes[0]" value="1" data-value="1" type="checkbox" class="input-md minimal" checked />
LICNA INVALIDNINA (CLAN 12 ZAKONA)
</label>
</li>
</ul>
</div>
If you have a div with a defined height and the CSS style, overflow:hidden, applied, then anything inside that div that extends past the boundaries will be cut off. The only way around this is to not use overflow:hidden. If you set it either to visible (which is the default if you just remove the overflow property completely) or auto (which will enable scrollbars within the div), you'll be able to see the entire dropdown menu. However, in the latter case (overflow:auto), you will likely have to scroll to see the cut-off portion of the dropdown menu. The only way to just have it display is to go with visible.