I'm playing a bit with Parties and the thing is I can't get "create party" and "invite" modals to work on bootstrap-3.
The mask (light gray background that hover the page) get launched but no modals appears.
I used: mrt add bootstrap-3 to add bootstrap (and deleted the default bootstrap version)
You may want to also check out the https://github.com/TimHeckel/meteor-bootboxjs package which (as of now) uses Bootbox 4.2.0 with Bootstrap 3.
It's not Meteor-esque, but it is a nice package for displaying modals that is extensively tested, and you can also insert reactive content into it (if not using the default alert, confirm, or prompt) by using a bit of a hack:
var fooDialog = bootbox.dialog(message: " ").html('');
UI.insert(UI.render(Template.bar), fooDialog[0]);
Just got it, I added show class to the div and it works
<div class="modal show">
Related
I am building a portfolio to show work I have created. It includes some small projects from FreeCodeCamp that are built according to test specs. I would like to include the tests so that someone looking at the code can see the tests.
When you embed the cdn script in your index.html file in a react app hosted anywhere, they work fine (even though React doesn't want outside forces manipulating the DOM). This will install a hamburger menu that can be exploded and you can choose which tests you would like to run. Note that this hamburger is always displayed.
However, I don't want to always have this hamburger menu because some of what I want to display is how the page is styled. I am trying to wait and insert the script tag until a button is pressed.
I can successfully display and remove the hamburger menu if I hit the add then remove buttons in order, but I know that I am doing this wrong when it comes to React design. This is obvious by the fact that if you hit add to dom button 2 times in a row, then it won't be removed. Also, I can run the test suite the first time. But if remove the hamburger and add it back and try to run the tests, there are errors in the console.
My question is: how can you properly add/remove a cdn script element (which will automatically add a dom element (hamburger), in a proper "React" design? I am thinking that solution lies with useEffect, useRef, or useState, but I am to "green" in React and when I research I still can't design a solution that works.
I put the code in a sandbox. To recreate the problem, just click the show the hamburger button, then hide the hamburger button, then show again and try to run the tests. Or click show several times in a row.
Any tips on how to fix this would be appreciated. This problem way exceeds my little experience.
Link to Code Sandbox
So I figured this out myself. In React, To safely make an element loaded into the DOM via external CDN appear and disappear was as simple as CSS.
I just added the item to the DOM with the CDN script tag. Then I could change either display:none or visibility: hidden.
The trick was loading the CDN script in first, then hiding it.
I was encountering a problem because I was trying the faulty approach of adding the CDN script tag, and removing, and adding again.
I just learned to create a website using bootstrap. I created a project using bootstrap for the appearance of the website. Initially, I used an online bootstrap to make the website display work optimally. I made a navbar with the hamburger menu, and when I clicked it the result was like this:
There is a smooth animation when I click the hamburger menu.
Then I tested the appearance of my website using offline bootstrap, and the results were like this:
There is no animation when I click the hamburger menu.
When I try to use the jquery slideToggle() script in html (I put it in html just for testing), the animation will appear like I am using an online bootstrap.
<script>
$(document).ready(function () {
$("#hamburgerMenu").click(function () {
$("#navbarTogglerDemo02").slideToggle();
});
});
</script>
Question: do I really have to implement the jquery slideToggle() script above into my javascript file or is there another way so I don't have to put the script? Because in online bootstrap I don't need to write the above script in my javascript file.
There's no reason that I can think of that the offline bootstrap should behave any differently than the online one.
I'd be curious on where did you source the two files and i'd do a comparison between the two. If it's working online, all you're doing is getting that code and minifying it for local use like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
Solved! The question has been answered, although I can't solve the error.
It turns out that the online bootstrap version that I am using is version 4.0.0 (I adjusted jquery and popper.js according to the documentation) and the offline version is 4.5.2. When I tried to use online bootstrap version 4.5.2 (with jquery and popper.js which have also been adjusted), the animation also didn't work. Once I tried bootstrap version 4.0.0 offline, the animation ran normally.
I'm not sure with this answer. There may be a bug in the bootstrap. But when I tried various methods, the result was same
Result:
Bootstrap 4.0.0: animation in toggle both offline and online goes as desired (there is a smooth animation)
Bootstrap 4.5.2: animation in toggle both offline and online does not work as desired (no animation)
My WordPress theme is not showing visible edit shortcuts in customizer, in menus, or any other place, but my sidebar template is showing the visible edit shortcuts. In my custom sections it shows when I don't select a page like in the TwentySeventeen Theme.
I'm not sure I fully understand the issue you're having. But a few things that might help you figure out how to solve the issue:
Switch themes and see if the issue persists
2 If the issue continues, deactivate all your plugins and turn them back on one by one to see if there's a conflict.
Finally, if you are trying to add edit buttons, you need to create a couple elements...
<input type="button" onclick"createEdit()" value="Edit">
and a javascript function...
<script>
function createEdit() {
THE CONTENTS OF WHAT NEEDS TO BE ALTERED
}
</script>
Hope this helps!
I'm developing a theme for an online store from scratch, I used underscores and Bootstrap and now I want insert a slider with the MetaSlider Plugin.
The problem is that I have no controls, and also the slider is not working, get stuck in the first image.
The curious thing is that in the admin page when I click on "save and previsualize" it works perfectly.
I inspected the code and I realized that the <ul> element that contains the controls is not there, so is not a css problem.
Check if there is no any conflict with another plugin. It may cause if there is another version of jQuery library that embedded in the page.
I have been having some kind of trouble creating the kind of sidebar navigation menu that is found on the Twitter Bootstrap Documentation site, pls do help me, I need it for a clients project?
I think what you are referring to is called Affix, and bootstrap includes it as a plugin. You just have to give it the appropriate class or via JS.
Here is some more info on it:
http://getbootstrap.com/javascript/#affix