I want to build a menu with a dropdown selection, using Semantic UI.
It works great on desktop, because it seems to be predicated on hovering.
However, on mobile, given there is no hover, I can't get it to drop down.
How do I get it to work based on clicking, not just hovering?
<!DOCTYPE html>
<html>
<head>
<title>Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui menu">
<div class="header item">Puzzles</div>
<div class="right menu">
<div class="ui simple dropdown item">
<div class="text">Unsolved Puzzles</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Puzzle 1</div>
<div class="item">Puzzle 2</div>
<div class="item">Puzzle 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to initialize the dropdown with $('.ui.dropdown').dropdown();
fiddle: https://jsfiddle.net/L63u25ja/
Related
I built an online interview. The form uses Angular.js and Bootstrap to display questions and answers. Each answer is attached to a point value that gets summed and totaled at the end for a test score.
The application works wonderfully on Chrome and Safari (both desktop apps), and in Chrome Dev Tools, it simulates well on a multitude of mobile screens. However, when I view the app on an actual mobile device, I am unable to select an answer among the radio buttons. What can I do to debug?
Is Angular.js likely the cause? Perhaps this is a known problem with Bootstrap? How do I troubleshoot and repair?
Live Site (works on desktop currently (April 7,2016), but not on mobile):
http://libertas-security466.info/interview
test.html (Template for each question/answer set)
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>{{question.text}}</h1>
<p ng-show="question.subtext">{{question.subtext}}</p>
</div>
<div class="col-sm-12">
<p>Remaining Questions: {{questionsLeft}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form class="form">
<div class="form-group">
<div class="input-group" ng-repeat="answer in question.answers">
<div class="input-group-addon">
<input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
</div>
<label class="form-control">
{{answer.text}}
</label>
</div>
</div>
</form>
</div>
<div class="col-xs-12"> </div>
<div class="col-sm-3 col-sm-offset-9 text-center">
<button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="FreemasonTest">
<head>
<title>Are you ready?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/routes.js"></script>
</head>
<body>
<script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
<script type="text/javascript" src="javascript/questions.js"></script>
<script type="text/javascript" src="javascript/needs.js"></script>
<script type="text/javascript" src="javascript/controllers/TestController.js"></script>
<script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
</div>
</div>
</nav>
<div ng-view></div>
</body>
</html>
#KieranDotCo provided the direction I needed. The solution to this problem comes in two parts:
How do I trouble shoot?
What is wrong?
== Troubleshooting ==
The instructions found at developers.google.com/web/tools/chrome-devtools/debug/… provided everything I needed to find and track down the solution.
== Making the App Work ==
The problem was not with Angular.js. Neither was it technically with Bootstrap, but the Bootstrap CSS was causing the problem.
I let the default column definition define the button div for the XS screen dimensions. In the Chrome debugger (image below), we will see that the <div> that contained the <button> element to select an answer, had dimensions that placed it above my radio buttons. This means that every time I tried to click a radio button, the blank space surrounding the "Select Answer" button was grabbing my event and bubbling it around the radio buttons to the body element that lay behind them.
In the above image, we see that when we select the <div> element which should cover the button and only the button that we have a highlighted area that expands in front of the radio buttons.
The answer to the problem lay in changing the class of this div to specify behavior for XS screens. After I add "col-xs-12" to the button div, the div no longer sits in front of the radio buttons and I can select options as I need to.
In the above image, we highlight the <div> as before, but now we see that the div is not bigger than the line that holds the <button>. The "col-xs-12" class 'fixed' the <div> dimensions and thus the app.
== Thank You ==
Big thank you to #KieranDotCo for teaching me about this great feature of Google Chrome's desktop application. You have opened a whole new world of debugging for me!
I am recently trying Angular UI Layout (https://github.com/angular-ui/ui-layout) which is pretty straightforward to use. However, I found the UI layout always overlaps with navbar of Bootstrap.
YOu can take a look at it here: http://plnkr.co/edit/r5veawwbgz98bZjLdr1B
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>UI.Layout Issue</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ui-layout style="position:relative; height:500px">
<div ui-layout-container style="border-style: solid;"><h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}" >
<div ui-layout-container style="border-style: solid;" ><h1>left</h1></div>
<div ui-layout-container style="border-style: solid;" ><h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div>
</div>
<!-- Le javascript -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script>
<script>
angular.module('x', ['ui.layout']);
</script>
</body>
</html>
A further investigation shows it is caused by the absolute positioning of UI layout. If I add a sytle:
<div ui-layout style="position:relative; height:500px">.
UI layout will not overlap with navbar anymore.
However, another issue arises, if the screen size changes, I have to manually change the height property of style.
So I am wondering whether there is any easy way to handle this.
Thanks
Derek
maybe it's too late, but i have the same problem and this is my solution :
simply add a fake div with size and max-size with value of your navbar's height to your ui-layout and make your navbar fix on top !
<nav class="navbar navbar-default navbar-fixed-top">
<div ui-layout>
<div ui-layout-container size="40px" max-size="40px" style="border-style: solid;">
<h1>fake</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}">
<div ui-layout-container style="border-style: solid;">
<h1>left</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;">
<h1>bottom</h1></div>
this is your plunker updated
You may wrap your UI-Layout to container with styles to prevent overlap:
.wrap {
position: absolute;
top: 50px;
left:0;
bottom:0;
right:0;
}
http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq
I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using #section('contents') ...Angular JS code... #stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "child.blade.php":
"main.layout.blade.php"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
#include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
#yield('content')
</div>
#include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
#extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
#section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
#stop
</body>
</html>
You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between #section('content') ... #stop I can't get understand why this is and how to solve it!!!!!!
This is the response from network panel:
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dr. Winthrop</li>
<li>Dr. Chase</li>
<li>Dr. Sanders</li>
</ul>
</li>-->
<li><span class="glyphicon glyphicon-edit"></span> Make CV</li
>
<li><span class="glyphicon glyphicon-eye-open"></span> Example</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in</li
>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
I'm not a blade user so I can't tell you exactly how to fix this. I do use PHP but I use Eloquent (the ORM part of Laravel) and use Slim for doing the server side routing. I believe it's best to write your HTML simply as HTML, use $http (basically the same as $.ajax) to get your data into the client code but write them as totally separate code bases. This will afford you a lot more flexibility and greatly simplify the task of debugging since you aren't trying to figure out issues between the server and client simultaneously. You can test the server in isolation using curl or POSTMan and then can separately build/test the client using mock objects or real requests to your server side component.
On the client side of things what you show being output has quite a few problems though, multiple html tags (should be 1 for the document) multiple ng-app (same, 1 for the page typically on the html or body tag).
For bootstrap use ui-bootstrap, you need the regular bootstrap.css file and the ui-bootstrap-tpls.js file but not bootstrap.js.
Where you have the jQuery to bind to a click event on some elements you should be using an ng-click directive in the markup instead, also can use ng-class to conditionally add/remove a class to an element based on the state of a model.
It seems like you have an understanding of roughly how to use all these things but you need to clearly separate things and stop using jQuery for a while to get used to how to do things with Angular properly. If you try to use jQuery outside of directives or tests with Angular you're typically doing something wrong. For details see "Thinking in AngularJS" if I have a jQuery background?
I succeeded without problems to launch the carousel in it standard form. Now, I would like to use the thumbnails below the carousel to select and force the image I want to see. This feature is on top of what exists within the carousel already. Ideally I wish to have a also an "active" class that I can use on the thumbnails to highlight which thumbnail I currently have on display in the carousel.
If somebody can help me for this next step.
thanks a lot
Peter
<html ng-app="myApp">
<head>
<title>Bootstrap tests</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container" ng-controller="Ctrl">
<h1>test Carousel</h1>
<div class="row">
<div >
<carousel interval="myInterval">
<slide ng-repeat="image in images" active="image.active">
<img ng-src="{{image.image}}" >
<div class="carousel-caption">
<p>{{image.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="clearfix"></div>
<div class="row" style="background-color:sienna">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" ng-repeat="image in images" ng-click="select(slide)">
<div class="thumbnail">
<img src="{{image.thumbnail}}">
</div>
</div>
</div<
</div>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-custom-tpls-0.10.0.min.js"></script>
<script type="text/javascript" src="js/servicesGetImages.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
use ng-class here like this:
<slide ng-repeat="image in images" ng-class="{ active : 'image.active'}">
I am new to semantic UI. I am trying to include the built in classes of semantic UI to my code. Semantic folder is containing so many built in classes.
1 . How do I find to which css file, my class is going to be associated?
2. In some of the examples, I see class names like - div class="ui large blue icon button" . In such cases how do I find these variations like blue,floated?
<html>
<head>
<link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.min.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/less/elements/button.less"/>
</head>
<body>
<div class="ui labeled icon button">
Download <i class="download icon"></i>
</div>
<div class="ui icon button">
<i class="download icon"></i>
</div>
<div class="ui button">
Download
</div>
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
</body>
</html>
Thanks,
Sabari
You need to add the css and the javascript libraries for semantic-ui.
Here try this example:
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.min.js"></script>
</head>
<body>
<div class="ui labeled icon button">
Download <i class="download icon"></i>
</div>
<div class="ui icon button">
<i class="download icon"></i>
</div>
<div class="ui button">
Download
</div>
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
</body>
</html>
Here is a jsbin POC: http://jsbin.com/ubiReqa/1/
Hope it helps.
Cheers,
Praney