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
Related
There are other similar questions here, but they all mention to change this:
.modal-backdrop {
display: none;
}
To enable using the rest of the page while modal is open, except my modal doesn't have this .modal-backdrop, I don't know if it's something new with Bootstrap 4, but this solution did not work.
My modal :
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Search
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="forms">
</form>
<hr>
<div class="container" id="table">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Export</button>
</div>
</div>
</div>
</div>
The idea here is to just have a dialog window that is draggable (I'm using jquery UI), is modal the correct component? Or cards? I used modal as they already position on the center and you don't need javascript to set up the close button.
Also open to suggestions of external libraries that implement a panel-like module and integrates will with Bootstrap.
And is there a way to make the background enabled without messing Bootstrap files too much?
I'm focusing on the .modal-backdrop here, as I assume you already solved the draggable part by using jQuery UI.
When it is used, .modal-backdrop actually is a fixed positioned div element covering the entire viewport and inserted before the </body> tag when the modal dialog is shown. By default this provides the shaded background behind the modal, and also listens to click events to close the modal if needed.
By using data-backdrop="false" this element is not inserted into the DOM, so visually it will seem that there is nothing behind the modal. However, the .modal tag is also an element covering all the viewport (above the page, in the foreground), and acts as a wrapper for the actual .modal-dialog tag.
So, in your scenario it is actually the .modal that is blocking (or catching) user interactions from the rest of your page.
You can overcome that with the help of the pointer-events css property like so:
.modal {
pointer-events: none;
}
The .modal-dialog will still receive interactions and will work as expected, but the page in the background will be clickable too.
I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
Hit a brick wall here.
I have an angular 1.5 app using ui-bootstrap.
I have a panel that I need to be collapsable on mobile, but not on desktop.
https://angular-ui.github.io/bootstrap/#/collapse
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
From their documentation, the above will toggle collapse the div based on the variable "isCollapsed".
This is great, but is there a way to set the "isCollapsed" true automatically when the window is below a specific size?
You could try something like isCollapsed="window.innerWidth<500". This should evaluate to true if the window width is less than 500px.
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.
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;">