i am having issues targeting css attribute with stimulus.js
i want to toggle display flex to none and flex when i click the icon
display:flex
#css
.dropnav{
display:flex
}
#hide_controller
......
static targets = [ "hide" ]
static classes =["display"]
connect() {
this.hideTarget.classList.add(this.displayClass)}
toggle(){
this.hideTarget.classList.toggle(this.displayClass)}
.....
#html
....
<li class="nav_items" data-controller="toggle" >
</i>
<div class="dropnav" data-toggle-display-class="display" data-toggle-target="hide">
<a href="" class="drop_down_items" ></a>
Links
.......
error message
Error: Missing attribute "data-toggle-display-class"
where do i add the class?
thanks
data-toggle-display-class="display" should go on same element where the controller is defined. So in your case:
<li class="nav_items"
data-controller="toggle"
data-toggle-display-class="display">
<a href="" data-action="toggle#toggle" >
<i class="far fa-user-circle fa-2x "></i>
</a>
<div class="dropnav" data-toggle-target="hide">
<a href="" class="drop_down_items" ></a>
Links
</div>
</div>
And then in your css you hide or show element like:
.nav_items {
.dropnav {
display: none;
}
&.display {
.dropnav {
display: flex;
}
}
}
Related
So I learning by building a portfolio SPA and I really want to use md-sidenav and so far it works but its showing up above my content and i want it to just push my content to the right when it's opened.
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
});
HTML
<div layout="row" ng-controller="MyController">
<!--MENU ICON AND FUNCTION -->
<md-button ng-click="openLeftMenu()">
<a><i class="material-icons medium">menu</i></a>
</md-button>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="background-color: white;" >
<div class="container" style=" margin-top: 30px;
width: 90%;">
<img class="circle responsive-img ram " src="assets/avatar.png" style="margin-left: 13%">
<p style="font-weight:bold;
text-decoration:underline;color:#FF5E19;
letter-spacing:1pt;word-spacing:2pt;
font-size:18px;text-align:center;font-family:arial, helvetica, sans-serif;
line-height:1;">Ramin Joseph</p>
</div>
<div class="nav-wrapper">
<div class="col l12 s12 m12">
<ul style=" text-align:center;">
<li class="sbar">About</li>
<li class="sbar">Portfolio</li>
<li class="sbar">Shop</li>
<li class="sbar">Contact</li>
</ul>
</div>
</div>
</md-sidenav>
Use attribute md-is-locked-open on md-sidenav element.
However, then you'll have to change the logic how to open the sidenav. I would do it by binding md-is-locked-open to the model state property and then toggling it myself on click event:
<md-sidenav md-is-locked-open="isSideNavOpen">...</md-sidenav>
$scope.openLeftMenu = function() {
$scope.isSideNavOpen = !$scope.isSideNavOpen;
};
For new Angular Material version
Add mode="push" in your <md-sidenav>.
<md-sidenav mode="push">
</md-sidenav>
Refer this : Sidenave | Angular Material | Mode
I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
I have a normal bootstrap navbar with some drop downs on it. When I click on a link in a drop down a modal box appears on screen, when I exit the modal box and then try to click on the drop down again on the navbar it won't work, an orange square border appears around the dropdown as if it can't get focus again or something. Any ideas why this could be happening?
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="navbar-inner" id="background">
<a class="brand" href="#Url.Action("RssIndex", "Home")">
<img src="~/Images/iconnewzy.png" alt="Newzy" ></a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>
<label style="display: inline; cursor: pointer;" id="friendsId">Friends</label><b class="caret"></b></a>
<ul class="dropdown-menu">
Add Friend
View Friends
</ul>
</li>
<b style="vertical-align: bottom !important; color: white">Hello, #User.Identity.Name!</b>
#Html.ActionLink("Log off", "LogOff", "Account", routeValues: null, htmlAttributes: new { #class = "btn btn-mini btn-primary" })
</ul>
</div>
</div>
I had the same problem. I've found a workaround in this article. Basically, you have to add this code to your page:
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
Is it possible to have multiple split buttons in a jQuery mobile list?
I've tried doing this:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</li>
</ul>
But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?
UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<div data-role='controlgroup' data-type='horizontal'>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</div>
</li>
</ul>
Thanks
Sounds like what you want is a horizontal controlgroup nested in a listview.
http://jsfiddle.net/nrpMN/
<ul data-role='listview'>
<li>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left
.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }
Or you can add another class
.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }
And change the div to adjust the
<ul data-role='listview'>
<li>
<div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.
<li>
<a href='#popupItem' data-rel='popup'>List Text</a>
<div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?