What I am trying to do is the following: I want an Accordion each row having
a question name (in the example below this is "Question 1") and two buttons in the title. However, there are two things going wrong.
Firstly, when clicking one of the two buttons, the accordion collapses. This I could not get fixed.
Secondly, when the accordion is closed, the buttons overlap the boundary of their row. This can be seen in the second picture.
<div class="ui vertical styled fluid accordion">
<div class="active title">
<i class="dropdown icon"></i> Question 1
<button class="ui right floated button"><i class="copy icon"></i>Copy</button>
<button class="ui right floated button"><i class="share icon"></i>Share</button>
</div>
<div class="active content">
<div class="ui celled grid">
<div class="row">
<div class="ui eight wide column">
<p>Question 1</p>
</div>
<div class="ui eight wide column">
<p>Answer: lorum ipsum en dingen</p>
</div>
</div>
</div>
</div>
</div>
i resolved it by using the "selector" which is provided by the semantic ui itself. Here i attached the sample
$('.ui.accordion').accordion({
selector: {
trigger: '.title .qus_label'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="ui styled accordion" id="qus_acc">
<div class="item">
<div class="title">
<div class="qus_label">
<i class="dropdown icon"></i>
<label>Asd</label>
</div>
<div class="field" align="right">
<div class="ui blue compact simple dropdown button" title="Settings">
<i class="fa fa-cog"></i>
<div class="ui menu">
<div class="item field">
<div class="ui checkbox">
<input type="checkbox">
<label>Required</label>
</div>
</div>
<div class="item field">
<div class="ui checkbox">
<input type="checkbox">
<label>Random</label>
</div>
</div>
</div>
</div>
<div class="ui red compact icon button" title="Delete" onclick="alert('Hi');">
<i class="fa fa-trash"></i>
</div>
<div class="ui green compact icon button" title="Edit">
<i class="fa fa-pencil-square-o"></i>
</div>
<div class="ui yellow compact icon button" title="Add Logic">
<i class="fa fa-share-alt"></i>
</div>
</div>
</div>
<div class="content">
<div class="transition hidden">
<div class="ui form">
<div class="field">
<label>Question</label>
<input type="text" placeholder="Single Selection">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Related
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-6 pull-left">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-12">
<span class="col-xs-6 pull-left">Ingredient</span>
<span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
</div>
<div>
<div>
Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.
I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working
Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-6">
<span class="pull-left">Ingredient</span>
<span class="pull-right" style="padding-right:0px">Quantity</span>
</div>
</div>
Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#
<div class="col-12" style="padding:0px">
<div class="col-12"><strong>Cooking Details</strong></div>
<div class="col-6">
<span class="float-left">Ingredient</span>
<span class="float-right" style="padding-right:0px">Quantity</span>
</div>
</div>
I'm not sure if you wanted something like this. When you add the col you have to use a div with row class a wrapper
#EDITED: WAY BETTER SOLUTION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<div style="padding: 0px;">
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="pull-left">Ingredient</span>
<span class="pull-right">Quantity</span>
</div>
</div>
Or Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="float-left">Ingredient</span>
<span class="float-right">Quantity</span>
</div>
</div>
I've hard time installing RTL with Semantic UI, I used npm to insall semantic then edited the semantic.json file "rtl": false, to true
then followed this question (Existing Installation) but neved worked does semantic ui framework support rtl languages?
I also tried this with CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html didn't work either!
What is the problem ?
semantic.json
permission": false,
"autoInstall": false,
"rtl": true,
"version": "2.3.3"
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Homepage</title>
<!-- Semanti UI -->
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
<!-- Semanti UI -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- nav -->
<div class="ui stackable menu">
<div class="item">
<img src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<div class="right menu">
<a class="item ">Sign-in</a>
<a class="item ">Sign-up</a>
</div>
</div>
<!-- nav -->
<div class="commentsContainer">
<h2 class="ui center aligned icon header">
SMLE
</h2>
<div class="ui stacked segment">
<p> بسم الله الرحمن الرحيم
</p>
</div>
<div class="bu">
<div class="RorL">
<button class="ui blue right labeled icon button">
<i class="right arrow icon"></i>
التالي
</button>
</div>
<button class="ui blue left labeled icon button">
<i class="left arrow icon"></i>
السابق
</button>
</div>
<div class="ui small comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply"><span> 22</span> UpVote</a>
<a class="reply">DownVote</a>
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
<!-- Comments -->
</div>
<!-- Semanti UI -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
<!-- Semanti UI -->
</body>
</html>
Fixed it , It's a simple mistake.
The code was missing this.
<html dir="rtl" lang="ar">
I am rendering dropdown search input like this:
<div class="field">
<label>Foo</label>
<select name="foo" class="ui search dropdown">
<option value="">Choice</option>
</select>
</div>
It creates standard SemanticUI dropdown input.
Is there possibility to tell Semantic to not render any icon or to render different icon in the input field?
You can try the alternative method of creating a dropdown (this will need to be intialized by $('.dropdown').dropdown();
$('document').ready(function() {
$('.dropdown').dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<h2>Default</h2>
<div class="ui dropdown">
<div class="text">Foo</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice</div>
</div>
</div>
<h2>No Icon</h2>
<div class="ui dropdown">
<div class="text">Foo</div>
<div class="menu">
<div class="item">Choice</div>
</div>
</div>
<h2>Custom Icon</h2>
<div class="ui dropdown">
<div class="text">Foo</div>
<i class="user icon"></i>
<div class="menu">
<div class="item">Choice</div>
</div>
</div>
<h2>Search Input</h2>
<p>
Same applies as above: Default, None or Custom icons are allowed
</p>
<div class="ui search selection dropdown">
<input type="hidden" name="country">
<div class="default text">Foo</div>
<div class="menu">
<div class="item" data-value="af">Choice</div>
</div>
Source: http://semantic-ui.com/modules/dropdown.html
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I'm using Twitter Bootstrap (latest version - 2.3.2) for a site I'm building, and want to achieve the following while keeping the site responsive, and also applying best practices for it.
Here's a very rough sketch of what I want to have:
The site has a basic header with fixed navbar, a content-fluid div which has three inner divs: a span5, span6, and span1 (for a total of 12 columns). After the content div, a sticky footer with company/copyright info and such.
The problem I'm having is with the span1 column. It is basically decorative (it has 4 vertical color bars, sized at 25% width each), but I'd like to have:
Social link icons vertically-centered in the column (Twitter, Facebook, LinkedIn, etc), as shown by the black boxes.
Text rotated 90 degrees counter-clockwise inside each colored bar. It's only one word each, and is not a priority.
Each bar stretching to fill the full height of the parent container (in this case, the content div), since the height of the page is currently set by the highest div, whether it's span5 or span6.
I know there are probably lots of ways to achieve this (pure CSS, javascript, background-image tiling), but I'm looking for the best practices: avoiding extra markup, using right techniques, in order to learn as much as possible. I've tried setting the parent container (and inner bars) to height: 100%; and playing with min-height as well, but min-height doesn't (seem to) work with percentages.
Any help and/or constructive criticism is very welcome.
Edit: JSFiddle and full code added: JSFiddle
Also, link to the original site (in case JSFiddle screws something up): Original page
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Geología y Telecomunicaciones, C.A.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Inicio
</li>
<li>Acerca de
</li>
<li class="active">Contacto
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row-fluid content clearfix" style="margin-top: 60px;">
<div class="span5">
<div class="row-fluid">
<div class="span5">
<div class="span12 logo"></div>
<div class="sidebar-intro">Construcción, Adaptación,
<br/>Adecuación y Remodelación
<br/>de <span class="emphasis-red">
locales<br>comerciales<br>empresariales
</span>
</div>
</div>
<div class="span7">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small>Ver mapa más grande</small>
</div>
</div>
</div>
<div class="row-fluid">
<div class="contact-wrapper well">
<form>
<div class="control-group">
<label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
<div class="controls controls-row">
<input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electrónico</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre#sudominio.com">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
<div class="controls">
<textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</div>
<br class="clear">
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
<img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
</div>
<div class="row-fluid">
<div class="row-fluid span12 address"> <address>
Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
</address>
</div>
<div class="row-fluid e-mail">
<div class="span4 offset6"> direccion#geotelca.com
</div>
</div>
</div>
</div>
<div class="span1 social-links">
<div class="row-fluid vertical-bars">
<div class="span3 bar bar-lightblue"></div>
<div class="span3 bar bar-purple"></div>
<div class="span3 bar bar-orange"></div>
<div class="span3 bar bar-lightorange"></div>
</div>
</div>
</div>
</div>
<!--/.container-fluid-->
<div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
<div class="container">
<p class="muted credit">Diseñado, codificado y mantenido por #kenshin23
</p>
</div>
</div>
I would say your best bet here would be one of the jQuery plug-in out there to accomplish this ... eqHeight.coffee seems to be pretty well documented:
https://github.com/jsliang/eqHeight.coffee/
As for centering those social links in that vertical space, you'd likely have to use more Javascript to do that. Although, honestly I'd probably put them in a div container with position: fixed; and let them slide up and down that column as the user scrolls.
EDIT:
Just noticed you added your HTML file ... in the case of the first plug-in I linked to, you would need to add a class (perhaps 'eq-height') to each of the columns whose heights you wanted to match (that first outer span5 and span6 and then all the bar column divs individually). Then on jQuery document ready, use:
$(document).ready(function() {
$(".content").eqHeight(".eq-height");
});