Semantic UI: How to define selected item of search dropdown (“
My mistake was: I have initialized the Semantic UI Dropdown before I've loaded the dropdown items via AJAX. The solution: Initialize the Dropdown AFTER the AJAX loading process.
semantic-ui accordion I dont want close if only 1 left open even you click
I am working with the accordion right now and saw your question looking for an answer of my own.. I believe you want to leave the 'exclusive' behavior to true and set the 'collapsible' behavior to false. The way I am reading it is that exclusive only allows one section...
semantic-ui - laying out fields in a form
look at http://jsfiddle.net/3tzzj0de/1/ (you might need to expend the result box in order to disable the "small screen view" the first row split into three equal fields: <div class="three fields"> <div class="field">...</div> <div class="field">...</div> <div class="field">...</div> <div> the second row use field sizing as a grid http://semantic-ui.com/collections/form.html#field-width <div class="fields"> <div...
How to keep image scale during resize
The problem was with the default max-width property. it used to be max-width: 100%; by default now I have this: .ui.tiny.images img, .ui.tiny.image { width:32px; max-width: none; } ...
Get this._id of collection instance in template.foo.rendered
javascript,mongodb,templates,meteor,semantic-ui
Instead of this, you can use Template.currentData inside the rendered callback. See the docs at http://docs.meteor.com/#/full/template_currentdata....
How can I change text color in a Semantic UI vertical menu?
The code for that would look something like this <div class="ui vertical menu"> <a class="home"> HOME </a> </div> Your css would have to look something like this with your desired color a.home { color: red; ... } ...
Semantic-ui search - access object properties not used in 'searchFields'
Semantic UI actually provides a way of accessing any of the object's properties. I used both dropdown and search classes, as shown in the docs with hidden input values for the properties. <template name="search_drop"> <div class="ui floating dropdown labeled search icon button"> <i class="search icon"></i> <span class="text">Search subjects...</span> <div class="menu">...
Responsive Web Page Scrolling Glitch On iOS
ios,iphone,responsive-design,semantic-ui
I fixed my problem, it is causing because of overflow-x:hidden at container div.
How to use Sementic UI cdn
You just need to copy the URL of the files you want to use for Semantic UI, and put it in your header under a script or link tag as the "src" or "href" value. For Semantic UI, you need three files for general use: semantic.min.css jquery.min.js (from JQuery CDN)...
Semantic Ui Menu not working
here's a handler similar to the one on their demo site DEMO screenshot: $('.ui.green.menu') .on('click', '.item', function() { if(!$(this).hasClass('dropdown')) { $(this) .addClass('active') .siblings('.item') .removeClass('active'); } }); ...
Blank space in left sidebar of wordpress dashboard
php,html,css,wordpress,semantic-ui
If you mean the white space between the sidebar menu and the black div block positioned absolutely at bottom-left, then you can do #wpwrap #adminmenuback{z-index:initial} Originally this was set to -1, making #adminmenuback covered by other elements with a white background....
How to leave semantic-ui sidebar opened
javascript,sidebar,semantic-ui
found a fiddle which helped me figuring this one out. http://jsfiddle.net/8f11gjez/1/ It seems that if you add the styles <div class="ui left sidebar overlay visible"><a class="item">Home</a></div> <div class="pusher"> </div> the only problem is the overlay on the pusher but I'll fix that with a media query for the device and add...
Semantic UI modal not opening
javascript,jquery,html,modal-dialog,semantic-ui
It could be possible that you are binding the event way before the DOM is ready, so instead try with wrapping your code in doc ready: $(document).ready(function(){ $('#logIn').click(function(){ $('#modaldiv').modal('show'); }); }); Another thing is you can check for errors in browser's console, which can help you understanding the problems....
Angularjs: How to capture the text in tag and use it inside my controller
javascript,angularjs,semantic-ui
You can pass post parameter to your function like showCustom(post). <div id="editbtn" ng-click="showCustom(post)" class="circular ui icon button"> <i class="edit icon"></i> </div> Which you can use it in controller. $scope.showCustom = function(post) { var postId = post.id; //Get id var title = post.title; //Get Title //Rest of your code } ...
Semantic ui sidebar implementation
html,css,html5,button,semantic-ui
You have to include the jQuery library in the <head></head> section of your page: <script language="javascript" src="http://code.jquery.com/jquery.min.js"></script> And the semantic.js file: <script language="javascript" src="[your path here]/semantic.js"></script> Which you have to download from: http://semantic-ui.com/ (It's located inside the folder dist. Copy that file in the desire location and populate src with...
Search Module in Semantic-UI
I recommend using the latest version of search.js and api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/modules/search.js API lets you create endpoints with url templating, this allows you to specify your API in one place, and have url variables be replaced at run-time. For example on a recent project I used an API map like...
Why are my columns too wide when using only the grid module from Semantic UI?
html,css,grid-layout,semantic-ui
Your problem is that you're only including the grid.css stylesheet. You still need the semantic.css stylesheet for the grid to work. Here is the updated fiddle link, I only added the semantic.min.css resource to it, that fixed the problem. http://jsfiddle.net/DrkStrife/j8okweLv/1/ EDIT: Looks like semantic does include everything. I checked the...
SemantiUI: Sidebar flyout menu
Resolved this using a popup.., Elements like that support overflow cannot have menus extend beyond the sidebar ("Fly-out"). So Pop-ups are the only option. Define a popup and in the javascript initializing the popup set its popup parameter.., Ex: SideBar: <div id="mnuSideNav" class="ui left vertical menu labeled icon inverted sidebar">...
Bug in Meteor/Semantic-UI?
The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to...
How to override settings in Semantic UI v1
I'm just figured this out myself by using the kitchensink code example. Should be something like this for your example: $('.sideMenu').sidebar('setting', { dimPage: false }); $('.sideMenu').sidebar('attach events', '.menu.button'); ...
Including semantic-ui's less files into existing build system
The behaviors, collections, elements, globals, modules and views in your src/definitions define your missing @type. You should import each behavior, collection, element, global, module or view into your project file independently of each other. For instance: @import "./definitions/modules/rating"; Notice that the rating.less file imports your @import '../../theme.config'; file and so...
How to disable title&content in semantic-ui accordion?
I decided to just create my own custom class for now that borrows from the button element. .disabled.title { cursor: default; background-color: #dcddde !important; color: rgba(0, 0, 0, 0.4) !important; opacity: 0.3 !important; background-image: none !important; box-shadow: none !important; pointer-events: none; } I can then do: <div class="ui accordion"> <div...
Semantic Multiple Modals On Same Page
I believe I found an answer. In the class for the modal I just added 'transition hidden' and that seems to solve the problem.
Progress Bar Increment/Decrement
The code for that page is located here, and you are looking at this section in particular: $buttons .on('click', function() { var $progress = $(this).closest('.example').find('.ui.progress') ; if( $(this).hasClass('increment') ) { $progress.progress('increment'); } else { $progress.progress('decrement'); } }) ; As you can see, each button is added a click event. Then,...
Correct Way to Dynamically Add Semantic UI Controls?
javascript,jquery,html5,semantic-ui
There are few ways of adding elements to DOM. html (would empty the container and then insert new elements) is one of them. You can also use append to append new elements to an existing set. But, your problem is about events not being triggered on dynamically added elements. The...
Listen to Semantic UI form validation errors before submit
jquery,forms,validation,modal-dialog,semantic-ui
Instead of using disabled for submit, make sure modal stays opened even with clicking on the submit (Modal approve) button, and pass the decision to close modal to semantic UI form validation events (i.e. onSuccess). So something similar to this: $('.ui.modal').modal({ onApprove : function() { //Submits the semantic ui form...
Semantic UI popup position far off
According to the docs You don't need the inline option Using the setting inline: true will let Semantic know to display the next sibling ui popup element after the activator. If you remove the inline option and make sure there is space for the popup, it will show correctly. http://jsfiddle.net/smt94eox/1/...
Semantic UI - Keep thead visible when scrolling tbody
As @Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.
semantic ui library sidebar onhidden event not triggering
javascript,angularjs,semantic-ui
Do this: $('.sidebar') .sidebar({ onHide: function() { console.log('on hidden'); } }); Syntax is : $('.your.element') .sidebar('behavior name', argumentOne, argumentTwo); ...
Semantic-Ui modal jittery behaviour
I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.
How to attach a button groups to a card with Semantic-UI
What you need is to specify how many buttons you have, with two fluid buttons <div class="ui two bottom attached fluid buttons "> Here's a fork of your JSFiddle: http://jsfiddle.net/txfLkcjp/1/...
How to use semantic-ui in react with webpack?
jquery,reactjs,commonjs,semantic-ui
As for the CSS you're going to want to load that in your index/whatever.html file before sourcing your JS. Try the following before you require semantic-ui: var $ = jQuery = require('jquery/dist/jquery.js'); window.jQuery = $; // Assure it's available globally. var s = require('semantic-ui/dist/semantic-ui.js'); Not 100% sure this will work...
Semantic UI and Meteor JS: Validating Form Without Changing Page
javascript,html,css,meteor,semantic-ui
I had a similar issue with form validation. i.e after the form was revalidated it still came up with the error message eventhough the validation was correct. The problem occurs because although you cleared and reset the form with $('form').form('clear') $('form').form('reset') The form ui-message class will STILL look like this...
semantic-ui sortable table not getting sorted
Just add this javascript call $('.sortable.table').tablesort(); ...
Meteor with Semantic UI dropdown behavior not working
jQuery plugins need to be initalized when the corresponding HTML elements have been inserted in the DOM, which is usually the case in standard server side rendered webapps, but Meteor takes a different approach by using client side reactive templating, all the HTML generation is done in the browser. This...
Semantic ui Form
javascript,forms,meteor,semantic-ui
Your form has no submit button. Only a div formatted as a button with the class of submit. You'll either need to add a click handler to the div or switch to an actual button.
How to make Semantic UI button group selectable
javascript,jquery,html,uibutton,semantic-ui
Whenever a button is pressed Semantic UI gives that button a class name called active. To select from your group you could do: var selected = document.querySelector(".huge.ui.buttons").querySelector(".active"); This will select the UI group with the first part and returns the selected element with the second part. You can perform actions...
Is there a Semantic UI equivalent to Bootstrap's .container class?
css,twitter-bootstrap,semantic-ui
Semantic UI author here. I will be adding a generic container class in next minor release.
Crossfading between images as background-image in Semantic-UI
That looks to be more of an issue with the fade()function. It doesn't seem to preserve any changes made to the #maindiv element after the first call to fade(). You can use CSS transitions to do what you're trying to do (just be aware of the browser support with CSS...
Semantic UI: How to prevent form from being submitted when validation fails?
javascript,jquery,html5,semantic-ui
Ok I figured it out. All I need to do is change $('form .submit.button').api(... to $('form').api(... I didn't realise that I could call .api() directly on the <form> element. Now the api call isn't made when the form is invalid because the form isn't submitted (previously I had the api...
semantic-ui modal Close - OK/Cancel Callback
add a .approve class (or alternative. see http://semantic-ui.com/modules/modal.html#/settings to your 'OK' button to trigger the onApprove callback. .close class for your Close button. I have only be using semantic-ui for 2 weeks (and modals for a few hours) so caution required. Thanks mike123 for your answer. $('.ui.modal.myModal').modal({ onHide: function(){ console.log('hidden');...
ReactJS dropdown menu (using Semantic UI) won't fire onChange event?
javascript,reactjs,semantic-ui
Soooo after a ton of experimenting and different attempts i figured out that everything was set up perfectly, but I had been initializing the Semantic UI dropdown with a JQuery command elsewhere which was causing some issues.
Semantic UI: active dropdown menu not working
For now, I suggest to use select box with the value selected, and convert it to semantic UI dropdown list. This however isn't the best and most flexible approach. <h2>Official Search Selection Dropdown Select Tag</h2> <select name="country" class="ui search selection dropdown"> <option value="">State</option> <option>Alabama</option> <option>Alaska</option> <option>Washington</option> <option>West Virginia</option> <option>Wisconsin</option> <option...
Getting the current state of a semantics accordion in meteor
The problem is that your helper does not reference a reactive data source, which means it won't be re-executed whenever the state of the accordion is changed. You can fix this by using Semantic UI accordion plugin callbacks to track the current state of the widget and store it as...
ruby code not working under the “ui” class when using semantic-ui
Thanks for the help from Facebook. Because we cannot put a tag within another one, use the code follow instead: <%= link_to({:controller => 'user', :action => 'profile'}, class: 'green item') do %> <i class='setting icon'></i> Profile <% end %> It's work for me!!...
semantic UI dropdown not working
javascript,jquery,html,drop-down-menu,semantic-ui
1: Use a more current version of jQuery: <script src="https://code.jquery.com/jquery-1.11.2.js"></script> 2: Instantiate only once for an element That seemed to fix it. The big deal is the old version of jQuery you have linked....
Semantic UI centre aligned login box?
See this code found in this link: <div class="ui one column stackable center aligned page grid"> <div class="column twelve wide"> Your stuff here </div> </div> ...
semantic-ui dist folder - Deployment without npm and/or gulp
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
Using semantic-ui and angularjs to show a list of items with a divider
It would be better if you'd created a fiddle. There are many ways to make dividers, for example: <div class="ui divided list" ng-repeat-start="dataset in datasets.results"> <div class="item"> <i class="map marker icon"></i> <div class="content"> <a class="header">{{dataset.name}}</a> <div class="description">{{dataset.description}}</div> </div> </div> </div> <hr ng-if="!$last" ng-repeat-end /> ...
Semantic UI form validation - validate certain form fields only if value is not empty
Update: This feature has now been implemented in version 1.2.0. The same optional flag can be used: http://semantic-ui.com/behaviors/form.html#optional-validation-fields Previous anwser and solution for Semantic versions < 1.2.0: I managed to work out a working solution for optional fields by extending the Semantic UI form validation behavior. Firstly I added an...
Semantic-UI: Why is the Body not the same viewport size?
It is because of the ui grid property which pulls content outside its area due to negative margin. Try setting it to 0. .ui.grid { margin: -1rem; // Change to 0 } The best practice is to wrap the ui grid inside a container. I am not sure why .container...
How to add a event on sidebar content in semantic ui?
This is speculative as I don't know Semantic-UI sufficiently well to be sure, but it's very possible that this is the result of the nodes containing the sidebar being moved within then DOM when the sidebar is initialised. That's what causes event-handlers to fail with modals in Semantic-UI, Foundation and...
Semantic UI Modal Dragging
Semantic UI does not support draggable modals at the moment like JQuery UI does. Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker...
Blank Search - Semantic UI
My problem was in the result json array from the Semantic-UI Search. It needs to be formated correctly like: { "results": [ { "title": "Result Title", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "Optional Price" "description": "Optional Description" }, { "title": "Result Title", "description": "Result Description" } ], // optional action below...
Proper Semantic-UI / Bower / Rails 4 configuration
ruby-on-rails,ruby,ruby-on-rails-4,bower,semantic-ui
I would take a gander at less-rails-semantic-ui, this is what I ended up going for my new rails project. It properly adds all the override files in vendor/assets!
Semantic-UI Transistioning from mobile to tablet displays with the sidebar open
jquery,html,css,responsive-design,semantic-ui
I found a solution to the problem that uses enquirejs which can be used to listen for media queries being matched and unmatched. <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script> var query='all and (min-width : 631px)'; enquire.register(query,function(){ $('#m_menu').sidebar('hide'); }); This is a fiddle and this is a runnable with this....
How do I submit a real-time validated form with Semantic UI and Meteor?
javascript,forms,validation,meteor,semantic-ui
This could be the stupidest question on all of SO. (Don't worry, I asked the question so I'm only dissing myself!) Semantic UI literally provides the on: change setting, which will validate the form in real time instead of on: blur which it is set to now. Oh, man......
how to dynamically enabled and disabled button when checkbox is checked and unchecked in semantic UI
javascript,jquery,checkbox,semantic-ui
Use toggleClass() like $(document).ready(function() { $('[type="checkbox"]').change(function() { $('#edit').toggleClass('disabled'); }); }); This will add the class if it does not exist or remove it if it does. $(document).ready(function() { $('[type="checkbox"]').change(function() { $('#edit').toggleClass('disabled'); }); }); .disabled { color: gray; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="ui fitted checkbox"> <input type="checkbox" />...
How to “stop” closing modal if form invalid
jquery,semantic-ui,jquery-forms-plugin
You can simply add a return false; in the modal's callback to prevent it from closing: $('.show-modal').click(function(e) { e.preventDefault(); $($(this).attr('data-modal-id')).modal('show',{ onApprove : function() { return false; //block the modal here } }); }); And once you're done, you can call $(theModal).modal('hide'); ...
Semantic UI - UI Search DropDown not showing up
I solved this by calling .dropdown() over the select selector in the document ready function.
Semantic UI Search Selection won't remain collapsed/unfocused on Modal load
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal: autofocus: function() { if(settings.autofocus) { var $inputs = $module.find(':input:visible'), $autofocus = $inputs.filter('[autofocus]'), $input = ($autofocus.length > 0) ? $autofocus : $inputs ; $input.first().focus(); } }, This setting...
Issue animating fixed button with JQuery on Firefox
jquery,css,firefox,semantic-ui
I found a solution for my issue. If I remove the animation script and use "margin-left" instead of "left" in CSS seems that the sidebar automatically and correctly pushes the button on the left. So this is my new CSS and JQuery code that works on Safari, Firefox and Chrome...
Semantic UI toggle button not appearing correctly
html,css,togglebutton,semantic-ui
It seems as though I am using a previous version of Semantic UI so some of the CSS is different to how we see it on their website. After digging through the Semantic UI css files I managed to get my checkbox looking like the first picture on this post....
Jade templating from SemanticUI
In other to put text after a tag with jade templating, you need to use the pipe symbol : h1.ui.header i.user.icon | Create Your Account Will generate : <h1 class="ui header"><i class="user icon"></i>Create Your Account</h1> You can try it on the jade demo page. Hope this helps....
How to change popup color?
I got the answer from their github page It is by adding variation: 'inverted', here is an example: https://jsfiddle.net/vx59te34/...
Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3
font-awesome,openlayers-3,semantic-ui
You need to explicitly set the font to FontAwesome using the font property, like so: var style = new ol.style.Style({ text: new ol.style.Text({ text: '\uf041', font: 'normal 18px FontAwesome', textBaseline: 'Bottom', fill: new ol.style.Fill({ color: 'white', }) }) }); Cheers!...
HTML5 behaving strange while working in jsFiddle
I found the answer. After several changes to the fiddle and my local code, I found that the only remaining difference was the CSS and JS of semantic-ui. Using the CDN version 1.12.3 seems to work - even though my local copy also is 1.12.3. Downloading the minifed versions from...
Semantic-UI: How to change dimmer background color?
javascript,jquery,html,css,semantic-ui
Use this css to change the background color of the dimmer CSS .dimmer { background-color: rgba(250,250,50,0.8); } Note that to keep the background translucent you have to use rgba() EDIT: To do this with jQuery JAVASCRIPT $(".dimmer").css("background-color","rgba(250,250,50,0.8)"); ...
Semantic UI: Access search component selected item
I know that this is probably not a complete answer but more informations can be found here: https://github.com/Semantic-Org/Semantic-UI/issues/1634 I asked the same questio and looks like this issue will be solved in 1.8.0....
Calendar Month and Year Not changing on dropdown year and month
meteor,fullcalendar,semantic-ui
After your template with class calendar has been added to the HTML you can use $('#myCalendar'). If the calendar is already rendered you can't use: $('#myCalendar').fullCalendar({gotoDate: moment(Session.get('date'))}); To go to a date you might want to call: $('#myCalendar').fullCalendar('gotoDate', moment(Session.get('date'))); ...
javascript,angularjs,semantic-ui
You can pass post parameter to your function like showCustom(post). <div id="editbtn" ng-click="showCustom(post)" class="circular ui icon button"> <i class="edit icon"></i> </div> Which you can use it in controller. $scope.showCustom = function(post) { var postId = post.id; //Get id var title = post.title; //Get Title //Rest of your code } ...
Semantic ui sidebar implementation
html,css,html5,button,semantic-ui
You have to include the jQuery library in the <head></head> section of your page: <script language="javascript" src="http://code.jquery.com/jquery.min.js"></script> And the semantic.js file: <script language="javascript" src="[your path here]/semantic.js"></script> Which you have to download from: http://semantic-ui.com/ (It's located inside the folder dist. Copy that file in the desire location and populate src with...
Search Module in Semantic-UI
I recommend using the latest version of search.js and api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/modules/search.js API lets you create endpoints with url templating, this allows you to specify your API in one place, and have url variables be replaced at run-time. For example on a recent project I used an API map like...
Why are my columns too wide when using only the grid module from Semantic UI?
html,css,grid-layout,semantic-ui
Your problem is that you're only including the grid.css stylesheet. You still need the semantic.css stylesheet for the grid to work. Here is the updated fiddle link, I only added the semantic.min.css resource to it, that fixed the problem. http://jsfiddle.net/DrkStrife/j8okweLv/1/ EDIT: Looks like semantic does include everything. I checked the...
SemantiUI: Sidebar flyout menu
Resolved this using a popup.., Elements like that support overflow cannot have menus extend beyond the sidebar ("Fly-out"). So Pop-ups are the only option. Define a popup and in the javascript initializing the popup set its popup parameter.., Ex: SideBar: <div id="mnuSideNav" class="ui left vertical menu labeled icon inverted sidebar">...
Bug in Meteor/Semantic-UI?
The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to...
How to override settings in Semantic UI v1
I'm just figured this out myself by using the kitchensink code example. Should be something like this for your example: $('.sideMenu').sidebar('setting', { dimPage: false }); $('.sideMenu').sidebar('attach events', '.menu.button'); ...
Including semantic-ui's less files into existing build system
The behaviors, collections, elements, globals, modules and views in your src/definitions define your missing @type. You should import each behavior, collection, element, global, module or view into your project file independently of each other. For instance: @import "./definitions/modules/rating"; Notice that the rating.less file imports your @import '../../theme.config'; file and so...
How to disable title&content in semantic-ui accordion?
I decided to just create my own custom class for now that borrows from the button element. .disabled.title { cursor: default; background-color: #dcddde !important; color: rgba(0, 0, 0, 0.4) !important; opacity: 0.3 !important; background-image: none !important; box-shadow: none !important; pointer-events: none; } I can then do: <div class="ui accordion"> <div...
Semantic Multiple Modals On Same Page
I believe I found an answer. In the class for the modal I just added 'transition hidden' and that seems to solve the problem.
Progress Bar Increment/Decrement
The code for that page is located here, and you are looking at this section in particular: $buttons .on('click', function() { var $progress = $(this).closest('.example').find('.ui.progress') ; if( $(this).hasClass('increment') ) { $progress.progress('increment'); } else { $progress.progress('decrement'); } }) ; As you can see, each button is added a click event. Then,...
Correct Way to Dynamically Add Semantic UI Controls?
javascript,jquery,html5,semantic-ui
There are few ways of adding elements to DOM. html (would empty the container and then insert new elements) is one of them. You can also use append to append new elements to an existing set. But, your problem is about events not being triggered on dynamically added elements. The...
Listen to Semantic UI form validation errors before submit
jquery,forms,validation,modal-dialog,semantic-ui
Instead of using disabled for submit, make sure modal stays opened even with clicking on the submit (Modal approve) button, and pass the decision to close modal to semantic UI form validation events (i.e. onSuccess). So something similar to this: $('.ui.modal').modal({ onApprove : function() { //Submits the semantic ui form...
Semantic UI popup position far off
According to the docs You don't need the inline option Using the setting inline: true will let Semantic know to display the next sibling ui popup element after the activator. If you remove the inline option and make sure there is space for the popup, it will show correctly. http://jsfiddle.net/smt94eox/1/...
Semantic UI - Keep thead visible when scrolling tbody
As @Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.
semantic ui library sidebar onhidden event not triggering
javascript,angularjs,semantic-ui
Do this: $('.sidebar') .sidebar({ onHide: function() { console.log('on hidden'); } }); Syntax is : $('.your.element') .sidebar('behavior name', argumentOne, argumentTwo); ...
Semantic-Ui modal jittery behaviour
I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.
How to attach a button groups to a card with Semantic-UI
What you need is to specify how many buttons you have, with two fluid buttons <div class="ui two bottom attached fluid buttons "> Here's a fork of your JSFiddle: http://jsfiddle.net/txfLkcjp/1/...
How to use semantic-ui in react with webpack?
jquery,reactjs,commonjs,semantic-ui
As for the CSS you're going to want to load that in your index/whatever.html file before sourcing your JS. Try the following before you require semantic-ui: var $ = jQuery = require('jquery/dist/jquery.js'); window.jQuery = $; // Assure it's available globally. var s = require('semantic-ui/dist/semantic-ui.js'); Not 100% sure this will work...
Semantic UI and Meteor JS: Validating Form Without Changing Page
javascript,html,css,meteor,semantic-ui
I had a similar issue with form validation. i.e after the form was revalidated it still came up with the error message eventhough the validation was correct. The problem occurs because although you cleared and reset the form with $('form').form('clear') $('form').form('reset') The form ui-message class will STILL look like this...
semantic-ui sortable table not getting sorted
Just add this javascript call $('.sortable.table').tablesort(); ...
Meteor with Semantic UI dropdown behavior not working
jQuery plugins need to be initalized when the corresponding HTML elements have been inserted in the DOM, which is usually the case in standard server side rendered webapps, but Meteor takes a different approach by using client side reactive templating, all the HTML generation is done in the browser. This...
Semantic ui Form
javascript,forms,meteor,semantic-ui
Your form has no submit button. Only a div formatted as a button with the class of submit. You'll either need to add a click handler to the div or switch to an actual button.
How to make Semantic UI button group selectable
javascript,jquery,html,uibutton,semantic-ui
Whenever a button is pressed Semantic UI gives that button a class name called active. To select from your group you could do: var selected = document.querySelector(".huge.ui.buttons").querySelector(".active"); This will select the UI group with the first part and returns the selected element with the second part. You can perform actions...
Is there a Semantic UI equivalent to Bootstrap's .container class?
css,twitter-bootstrap,semantic-ui
Semantic UI author here. I will be adding a generic container class in next minor release.
Crossfading between images as background-image in Semantic-UI
That looks to be more of an issue with the fade()function. It doesn't seem to preserve any changes made to the #maindiv element after the first call to fade(). You can use CSS transitions to do what you're trying to do (just be aware of the browser support with CSS...
Semantic UI: How to prevent form from being submitted when validation fails?
javascript,jquery,html5,semantic-ui
Ok I figured it out. All I need to do is change $('form .submit.button').api(... to $('form').api(... I didn't realise that I could call .api() directly on the <form> element. Now the api call isn't made when the form is invalid because the form isn't submitted (previously I had the api...
semantic-ui modal Close - OK/Cancel Callback
add a .approve class (or alternative. see http://semantic-ui.com/modules/modal.html#/settings to your 'OK' button to trigger the onApprove callback. .close class for your Close button. I have only be using semantic-ui for 2 weeks (and modals for a few hours) so caution required. Thanks mike123 for your answer. $('.ui.modal.myModal').modal({ onHide: function(){ console.log('hidden');...
ReactJS dropdown menu (using Semantic UI) won't fire onChange event?
javascript,reactjs,semantic-ui
Soooo after a ton of experimenting and different attempts i figured out that everything was set up perfectly, but I had been initializing the Semantic UI dropdown with a JQuery command elsewhere which was causing some issues.
Semantic UI: active dropdown menu not working
For now, I suggest to use select box with the value selected, and convert it to semantic UI dropdown list. This however isn't the best and most flexible approach. <h2>Official Search Selection Dropdown Select Tag</h2> <select name="country" class="ui search selection dropdown"> <option value="">State</option> <option>Alabama</option> <option>Alaska</option> <option>Washington</option> <option>West Virginia</option> <option>Wisconsin</option> <option...
Getting the current state of a semantics accordion in meteor
The problem is that your helper does not reference a reactive data source, which means it won't be re-executed whenever the state of the accordion is changed. You can fix this by using Semantic UI accordion plugin callbacks to track the current state of the widget and store it as...
ruby code not working under the “ui” class when using semantic-ui
Thanks for the help from Facebook. Because we cannot put a tag within another one, use the code follow instead: <%= link_to({:controller => 'user', :action => 'profile'}, class: 'green item') do %> <i class='setting icon'></i> Profile <% end %> It's work for me!!...
semantic UI dropdown not working
javascript,jquery,html,drop-down-menu,semantic-ui
1: Use a more current version of jQuery: <script src="https://code.jquery.com/jquery-1.11.2.js"></script> 2: Instantiate only once for an element That seemed to fix it. The big deal is the old version of jQuery you have linked....
Semantic UI centre aligned login box?
See this code found in this link: <div class="ui one column stackable center aligned page grid"> <div class="column twelve wide"> Your stuff here </div> </div> ...
semantic-ui dist folder - Deployment without npm and/or gulp
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
Using semantic-ui and angularjs to show a list of items with a divider
It would be better if you'd created a fiddle. There are many ways to make dividers, for example: <div class="ui divided list" ng-repeat-start="dataset in datasets.results"> <div class="item"> <i class="map marker icon"></i> <div class="content"> <a class="header">{{dataset.name}}</a> <div class="description">{{dataset.description}}</div> </div> </div> </div> <hr ng-if="!$last" ng-repeat-end /> ...
Semantic UI form validation - validate certain form fields only if value is not empty
Update: This feature has now been implemented in version 1.2.0. The same optional flag can be used: http://semantic-ui.com/behaviors/form.html#optional-validation-fields Previous anwser and solution for Semantic versions < 1.2.0: I managed to work out a working solution for optional fields by extending the Semantic UI form validation behavior. Firstly I added an...
Semantic-UI: Why is the Body not the same viewport size?
It is because of the ui grid property which pulls content outside its area due to negative margin. Try setting it to 0. .ui.grid { margin: -1rem; // Change to 0 } The best practice is to wrap the ui grid inside a container. I am not sure why .container...
How to add a event on sidebar content in semantic ui?
This is speculative as I don't know Semantic-UI sufficiently well to be sure, but it's very possible that this is the result of the nodes containing the sidebar being moved within then DOM when the sidebar is initialised. That's what causes event-handlers to fail with modals in Semantic-UI, Foundation and...
Semantic UI Modal Dragging
Semantic UI does not support draggable modals at the moment like JQuery UI does. Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker...
Blank Search - Semantic UI
My problem was in the result json array from the Semantic-UI Search. It needs to be formated correctly like: { "results": [ { "title": "Result Title", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "Optional Price" "description": "Optional Description" }, { "title": "Result Title", "description": "Result Description" } ], // optional action below...
Proper Semantic-UI / Bower / Rails 4 configuration
ruby-on-rails,ruby,ruby-on-rails-4,bower,semantic-ui
I would take a gander at less-rails-semantic-ui, this is what I ended up going for my new rails project. It properly adds all the override files in vendor/assets!
Semantic-UI Transistioning from mobile to tablet displays with the sidebar open
jquery,html,css,responsive-design,semantic-ui
I found a solution to the problem that uses enquirejs which can be used to listen for media queries being matched and unmatched. <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script> var query='all and (min-width : 631px)'; enquire.register(query,function(){ $('#m_menu').sidebar('hide'); }); This is a fiddle and this is a runnable with this....
How do I submit a real-time validated form with Semantic UI and Meteor?
javascript,forms,validation,meteor,semantic-ui
This could be the stupidest question on all of SO. (Don't worry, I asked the question so I'm only dissing myself!) Semantic UI literally provides the on: change setting, which will validate the form in real time instead of on: blur which it is set to now. Oh, man......
how to dynamically enabled and disabled button when checkbox is checked and unchecked in semantic UI
javascript,jquery,checkbox,semantic-ui
Use toggleClass() like $(document).ready(function() { $('[type="checkbox"]').change(function() { $('#edit').toggleClass('disabled'); }); }); This will add the class if it does not exist or remove it if it does. $(document).ready(function() { $('[type="checkbox"]').change(function() { $('#edit').toggleClass('disabled'); }); }); .disabled { color: gray; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="ui fitted checkbox"> <input type="checkbox" />...
How to “stop” closing modal if form invalid
jquery,semantic-ui,jquery-forms-plugin
You can simply add a return false; in the modal's callback to prevent it from closing: $('.show-modal').click(function(e) { e.preventDefault(); $($(this).attr('data-modal-id')).modal('show',{ onApprove : function() { return false; //block the modal here } }); }); And once you're done, you can call $(theModal).modal('hide'); ...
Semantic UI - UI Search DropDown not showing up
I solved this by calling .dropdown() over the select selector in the document ready function.
Semantic UI Search Selection won't remain collapsed/unfocused on Modal load
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal: autofocus: function() { if(settings.autofocus) { var $inputs = $module.find(':input:visible'), $autofocus = $inputs.filter('[autofocus]'), $input = ($autofocus.length > 0) ? $autofocus : $inputs ; $input.first().focus(); } }, This setting...
Issue animating fixed button with JQuery on Firefox
jquery,css,firefox,semantic-ui
I found a solution for my issue. If I remove the animation script and use "margin-left" instead of "left" in CSS seems that the sidebar automatically and correctly pushes the button on the left. So this is my new CSS and JQuery code that works on Safari, Firefox and Chrome...
Semantic UI toggle button not appearing correctly
html,css,togglebutton,semantic-ui
It seems as though I am using a previous version of Semantic UI so some of the CSS is different to how we see it on their website. After digging through the Semantic UI css files I managed to get my checkbox looking like the first picture on this post....
Jade templating from SemanticUI
In other to put text after a tag with jade templating, you need to use the pipe symbol : h1.ui.header i.user.icon | Create Your Account Will generate : <h1 class="ui header"><i class="user icon"></i>Create Your Account</h1> You can try it on the jade demo page. Hope this helps....
How to change popup color?
I got the answer from their github page It is by adding variation: 'inverted', here is an example: https://jsfiddle.net/vx59te34/...
Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3
font-awesome,openlayers-3,semantic-ui
You need to explicitly set the font to FontAwesome using the font property, like so: var style = new ol.style.Style({ text: new ol.style.Text({ text: '\uf041', font: 'normal 18px FontAwesome', textBaseline: 'Bottom', fill: new ol.style.Fill({ color: 'white', }) }) }); Cheers!...
HTML5 behaving strange while working in jsFiddle
I found the answer. After several changes to the fiddle and my local code, I found that the only remaining difference was the CSS and JS of semantic-ui. Using the CDN version 1.12.3 seems to work - even though my local copy also is 1.12.3. Downloading the minifed versions from...
Semantic-UI: How to change dimmer background color?
javascript,jquery,html,css,semantic-ui
Use this css to change the background color of the dimmer CSS .dimmer { background-color: rgba(250,250,50,0.8); } Note that to keep the background translucent you have to use rgba() EDIT: To do this with jQuery JAVASCRIPT $(".dimmer").css("background-color","rgba(250,250,50,0.8)"); ...
Semantic UI: Access search component selected item
I know that this is probably not a complete answer but more informations can be found here: https://github.com/Semantic-Org/Semantic-UI/issues/1634 I asked the same questio and looks like this issue will be solved in 1.8.0....
Calendar Month and Year Not changing on dropdown year and month
meteor,fullcalendar,semantic-ui
After your template with class calendar has been added to the HTML you can use $('#myCalendar'). If the calendar is already rendered you can't use: $('#myCalendar').fullCalendar({gotoDate: moment(Session.get('date'))}); To go to a date you might want to call: $('#myCalendar').fullCalendar('gotoDate', moment(Session.get('date'))); ...