Menu
  • HOME
  • TAGS

Semantic Multiple Modals On Same Page

semantic-ui

I believe I found an answer. In the class for the modal I just added 'transition hidden' and that seems to solve the problem.

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!...

How to change popup color?

semantic-ui

I got the answer from their github page It is by adding variation: 'inverted', here is an example: https://jsfiddle.net/vx59te34/...

Getting the current state of a semantics accordion in meteor

javascript,meteor,semantic-ui

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...

Blank Search - Semantic UI

javascript,html,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...

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....

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'))); ...

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">&nbsp;</div> the only problem is the overlay on the pusher but I'll fix that with a media query for the device and add...

How to keep image scale during resize

html,css,semantic-ui

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; } ...

semantic-ui accordion I dont want close if only 1 left open even you click

semantic-ui

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 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....

Semantic UI form validation - validate certain form fields only if value is not empty

jquery,validation,semantic-ui

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...

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 Menu not working

jquery,semantic-ui

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'); } }); ...

How can I change text color in a Semantic UI vertical menu?

html,css,jade,semantic-ui

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; ... } ...

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...

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...

semantic-ui sortable table not getting sorted

jquery,frontend,semantic-ui

Just add this javascript call $('.sortable.table').tablesort(); ...

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...

semantic-ui modal Close - OK/Cancel Callback

semantic-ui

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');...

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 attach a button groups to a card with Semantic-UI

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/...

Semantic-ui search - access object properties not used in 'searchFields'

semantic-ui

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">...

How to disable title&content in semantic-ui accordion?

jquery,semantic-ui

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...

HTML5 behaving strange while working in jsFiddle

html5,semantic-ui

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...

Progress Bar Increment/Decrement

jquery,semantic-ui

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,...

How to override settings in Semantic UI v1

semantic-ui

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'); ...

Semantic UI - Keep thead visible when scrolling tbody

html,css,semantic-ui

As @Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.

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...

ruby code not working under the “ui” class when using semantic-ui

ruby-on-rails,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 - laying out fields in a form

semantic-ui

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...

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....

Search Module in Semantic-UI

jquery,search,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...

Semantic UI Modal Dragging

modal-dialog,semantic-ui

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...

Meteor with Semantic UI dropdown behavior not working

jquery,meteor,semantic-ui

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 popup position far off

jquery,css,semantic-ui

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/...

How to use Sementic UI cdn

cdn,semantic-ui

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)...

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.

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)"); ...

SemantiUI: Sidebar flyout menu

sidebar,semantic-ui

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">...

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.

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 jittery behaviour

javascript,jquery,semantic-ui

I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.

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!

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" />...

semantic-ui dist folder - Deployment without npm and/or gulp

semantic-ui

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.

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...

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....

Semantic-UI: Why is the Body not the same viewport size?

html,css,semantic-ui

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...

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: How to define selected item of search dropdown (“