I used summernote package: summernote:summernote for my website and everything work well except the feature to insert image, videos and link won't work.
Example:
Click insert link button (image and videos are the same)
A popup appear to set the link.
Click anywhere on that popup, it disappeared.
Here are my code:
post_edit.html
<template name="postEdit">
<div class="ui segment">
<form class="ui form">
<h1 class="ui dividing header">Edit post</h1>
<div class="field">
<label>Title</label>
<input type="text" id="title" name="title" value="{{title}}">
</div>
<label>Content</label>
<div class="field" id="content" name="content">
{{{content}}}
</div>
<button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
<a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
<a class="ui button" href="{{pathFor 'postPage'}}"><i class="arrow left icon"></i> Back</a>
</form>
</div>
post_edit.js
Template.postEdit.onRendered(function(){
$(document).ready(function() {
$('#content').summernote({
height: 400,
maxHeight:800,
minHeight:250,
});
});
});
I ran into this issue myself when adding autoform-summernote to my project that already uses semantic-ui. The problem is that there's a conflict between Bootstrap's and Semantic UI's $.modal() method. See these links for code references:
Summernote modal init
Bootstrap's modal definition
Semantic UI's modal definition
Summernote expects the modal method to be Bootstrap's, but instead calls Semantic UI's modal method. Because of the differences between the implementations of the modal methods, the modal closes right away when you click anywhere in the window.
Without some low-level hacks, these two packages will conflict since Semantic UI's is available globally in your project on any $('object'). If you're not using Semantic UI's modal method anywhere else in your site, you could disable it, which will fix it in this case. However, that's not a solution that works for me. Instead, I'm looking into a solution to remove summernote, or at least its dependency on Boostrap.
Edit 1/13/2016
I ended up replacing summernote with a different editor, https://atmospherejs.com/gildaspk/autoform-medium. It gives me the functionality I need and doesn't have conflicting dependencies.
Related
I am using semantic UI to create a webpage (No React, NPM or anything fancy, just plain HTML/CSS). I am trying to add modal to my page but it behaves very strange as the modal height is too long. I don't have any other framework like Bootstrap included in my code.
How it behaves:
How it is supposed to behave:
Semantic UI Version: 2.4.2
Is Semantic UI Installed correctly? Yes, other components work.
My Code
HTML:
<div id="myModal" class="ui basic modal">
<div class="ui icon header">
<i class="archive icon"></i>
Archive Old Messages
</div>
<div class="content">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green ok inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
JS:
$('.ui.basic.modal')
.modal('show')
;
What I tried till now:
#myModal { position: relative;} and then adding id to my modal, as explained in this answer: https://stackoverflow.com/a/40774996/10934182
body{ max-height: 100vh; } as explained here: semantic-ui modal stretching window height
Code explained in this Fiddle (Not my fiddle): http://jsfiddle.net/MrLogical/2hda8e18/
Thanks!!
In your JSfiddle I noticed your div inside of .modal-content has min-height: 1000px. I removed this and the modal is normal height now.
This is not the problem with the height of the modal. This is because of the version of 'semantic-ui-css' latest version. You can solve this issue by installing the 2.2.14 version of the semantic-ui-css
*
npm install semantic-ui-css#2.2.14
*
It did for me and many other. So hope it'll work for you also
tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?
It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog
id of 1st modal is "modal1" and 2nd modal id is "modal2"
HTML code ->
1st Modal Call on Same Page
<div class="input-field col s12 m6 left-align">
<button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
<i class="material-icons right">import_export</i>
</button>
</div>
2nd Modal Call on Same Page
<div class="modal-trigger" style="cursor: pointer;">
<img src="abc.png" alt="" class="circle">
</div>
JS Code ->
'click .modal-trigger': function(event) {
event.preventDefault();
$('#modal1').openModal();
},
'click .importButton':function(event) {
event.preventDefault();
$('#modal2').openModal();
}
You have to give refrence of another template {{>import}} (my template
name is import) in which my modal2 is defined.
Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.
There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:
Modal.allowMultiple = true
In my web application using jQuery and jQuery UI (1.10.2 and 1.10.4 respectively), I use the CSS in jQuery CSS in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of the zip file from the jQuery site. I had a topNav bar like so before I got the jQuery-based autocomplete function to work:
MyProfile Link1 Link2 | search box | Logout
My search box is 300px and my fonts are 12px, and the width of the div container above is 700px and BEFORE I added jQuery autocomplete support, it was something like this:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<input id="searchBox" name="searchBox" type="search" >
<div class="right">
<a href...>Logout</a>
</div>
</div>
It was all well aligned then (all of topNav in one line).
Now, after adding jQuery support like so:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<!-- div-ing the input searchBox was the only change: -->
<div class="ui-widget">
<input id="searchBox" name="searchBox" type="search" >
</div>
<div class="right">
<a href...>Logout</a>
</div>
</div>
And now, the search box has decided it will appear in the next line, and the Logout also appears in the second line, like so:
MyProfile Link1 Link2
| search box | Logout
Any help on how to horizontally align after jQuery autocomplete support is appreciated.
I followed the approach in the accepted answer in this SO post. That seems to have solved my problem. The CSS properties of .ui-widget (the jQuery div element) can be additionally changed (for font size etc.) in your application, that is another way you can remove the issues from including that dependency.
When I am opening my Reveal Modal, I would like to prevent it from closing on background click (which is a default behavior).
I am using Zurb Foundation 5.0.2.
Any help would be appreciated.
If you set the closeOnBackgroundClick option to false then your modal won't close when you click in the background.
<div class="reveal-modal" data-options="closeOnBackgroundClick:false">
Yehhhhh Finally Found It:
Put below code on your foundation reveal model. Than it not close by clicking on background or by pressing esc key.
data-options="close_on_background_click:false;close_on_esc:false;"
Ex:
<div id="AccessContainer" class="reveal-modal" data-reveal data-options="close_on_background_click:false;close_on_esc:false;">
</div>
For anyone looking at this question in 2018, I'm using Version 6.4.0 and this works:
data-close-on-click="false" data-close-on-esc="false"
I added that to the reveal div like this and it's working (as of July 2018):
<div class="reveal" id="modalVideo" data-reveal data-close-on-click="false" data-close-on-esc="false">
You can achieve this globally by executing the following line of JavaScript before showing any modals:
Foundation.libs.reveal.settings.close_on_background_click = false;
For latest version of foundation by zurb use following snippet
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
Complete Code will look like
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
If using the stand-alone Reveal plugin here: https://zurb.com/playground/reveal-modal-plugin
Use the following on the link that opens the modal.
Open Modal
This answer applies to Foundation 6. Below are the correct option for both preventing close on background click (closeOnClick:false;) and preventing close via the Esc key (closeOnEsc:false;).
<div class="reveal" id="exampleModal1" data-reveal
data-options="closeOnClick:false; closeOnEsc:false;">