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
Related
for some reason bootstrap isnt making my website (https://dylantn.github.io/Dusic/) automatically mobile compatible because i checked this website on my phone and it is just a zoomed out version of the desktop version
some one pls help
im frustrated
and need help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ind.css">
<title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only"><font face="arial"></font>Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<font face="arial"><span class="navimg"><img src="dusic4.gif" width="80" length="80" alt=""></span></font>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><font face="arial">About</font></li>
<li><font face="arial">Contact</font></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><font face="arial">Sign Up</font></li>
<li><font face="arial">Login</font></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1><b><img src="dusic4.gif" width="250" length="250"></b></h1>
<h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>What is the purpose of Dusic?</h1>
<p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
<br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Try to add the following tag <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8"> to you head section.
You can find more info about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
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/
Here's a plunk I've been working on for another question. I'm not sure what I'm doing wrong, but I see the bootstrap examples (plunk), and they look like this:
While mine looks like this (specifically look at the panel-headings / panel-titles):
My panel-heading has no styling at all, even though we're using practically the same code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-header">
<h4 class="panel-title" uib-tooltip="ok">ui-grid tester</h4>
</div>
<div class="panel-body">
<button ng-click="changeColumn2Text()">Change Column 2 Text</button>
<br />
<br />
<div class="grid" ui-grid="gridOptions" ui-grid-selection=""></div>
</div>
</div>
</div>
</body>
The only difference is their panel is in a template (on the same page, with no special styles or classes) to use for an accordion, which doesn't seem to me like it should affect the styling.
So what am I doing wrong?
change panel-header with panel-heading class
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!
Im doing an ionic hybrid app an i have a problem with the modal
when i invoke the modal.show() method i see the blackdropdown but not the actual modal content (i copy pasted the example from the docs).
inspecting the modal object in chrome i see its well instanciated.
I think its related to my project setting so ill copy them here
index.html (placeholder)
<body ng-app="myApp">
<ion-pane>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
</body>
the page that holds the button to invoke the modal
<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
<div class="buttons" style="margin-top:20px;">
<button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
<h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
</div>
</ion-header-bar>
<ion-content style="margin-top:75px;">
<div id="errors" class="center" style="color:red;text-align:center;">
<ul>
<li ng-repeat="error in errors">{{error}}</li>
</ul>
</div>
<div class="center login-title">Transactions List</div>
<div class="row">
<div class="col">Date</div>
<div class="col">Transaction</div>
<div class="col">Amount</div>
<div class="col"></div>
</div>
<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
<div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
<div class="col">{{transaction.ProPayID}}</div>
<div class="col">${{transaction.Amount}}</div>
<div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>
and lastly my simple modal.html
<div class="modal">
<header class="bar bar-header bar-positive">
<h1 class="title">Sample Modal</h1>
</header>
<ion-content has-header="true" padding="true">
<p ng-repeat="data in boulderDataChanges">{{data}}</p>
<button class="button" ng-click="fakeLogin()">Fake Login</button>
</ion-content>
</div>
As mentioned the controller is invoking it correctly but the view just shows black curtain without the modal markup
turns out that the problem was that i have a bootstrap css in my project and it killed the ionic modal css
when i removed this line from my index
<link href="css/bootstrap.min.css" rel="stylesheet">
it worked like a charm
btw reason im using this css is because im using the angular date picker widget
if your index.html file contain
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
remove it.then it will work.
edit
this happens because of .model class in bootstrap.css set eliment on display:none
so you can simply modify bootstrap (just remove models).
http://getbootstrap.com/customize/?id=e025f1d7d08b43d76509f61bb1bf24d0
If you want to keep bootstrap unmodifed just add in this extra css rule to your project and this will fix the black background problem:
.modal-wrapper .modal { display:block; }