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").
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">
My Bootstrap 3.3.0 navbar wraps into two rows, apparently when width is less than #screen-md, even though there is plenty of space between left and right for it to shrink/use. How can I change it so that it doesn't wrap prematurely?
I've seen several questions asking about how to change the breakpoint for collapsing into a single column. I'm not asking about that, as my collapse is set to #screen-sm and I'm fine with that.
Right before the wrap. I can even insert another element on the right and it causes no problem.
Right after:
Here's my HTML:
<header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
<form ...>
<div class="container">
<div class="navbar-header">
...
</div>
<nav id="mm-navbar" class="collapse navbar-collapse">
<!-- Free-text Search -->
<div class="text-search input-group">
<input id="search-input" type="text" class="form-control"
placeholder="Search" name="q" value="{{ query }}" />
<span class="input-group-btn">
...
</span>
</div><!-- /text search -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
...
</li>
<li>Calculate</li>
<li class="dropdown">
...
</li>
<li> <a id="login_button" href="{% url 'account_login' %}">Login</a> </li>
<li>
<span class="fa feedback-button fa-envelope" data-toggle="modal"
data-target="#feedback-modal" title="Send Feedback"></span>
</li>
<li>
<span class="help-button glyphicon help glyphicon-question-sign" data-toggle="modal"
data-target="#help-modal" title="Help"/>
</li>
</ul>
<!-- Advanced Search -->
<div class="collapse" id="advanced-search-bar">
{% include "search.html" %}
</div>
</nav>
</div>
</form>
</header>
This question seemed related but pull-left and pull-right did not work for me.
Note the wrap introduced at < 992px (moving from screen-md into screen-sm), is accompanied by a large amount of margin on either side of the broken navbars (pic 2 above). The problem is that this entire navbar is wrapped in .container, which at this breakpoint sets a fixed width which the navbar can no longer fit into.
The solution is to use a .container-fluid instead (or no container, although I'm not sure of the ramifications of that).
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.
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
Is it possible to have a liquid navigation bar with the links having images. I am trying to have a responsive link with an image on the left and text on the right. If the size of the window changes then the button (link) will change size too. I would prefer to do this with CSS.
What I have tried so far is to have the following:
<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
<ul class="main_nav">
<li>
<a href="#me">
<img src="img/avatar/me.png" alt="me">
Me
</a>
</li>
<li>
<a href="#guide">
<img src="img/avatar/spotlight.png" alt="guide">
Guide
</a>
</li>
<li>
<a href="#downloads">
<img src="img/avatar/downloads.png" alt="downloads">
Downloads
</a>
</li>
</ul>
<div>