I want to use Summernote editor in a popup that is inside a popup,the popup code is inside the partial view. And i have included the css & js files in the main view but when i click on the editor button popup comes but i am not able to see the editor.I have searched a lot and not able to figure out what can be the issue.Is it because of the popup ??
Look at this demo I created just now-
http://jsfiddle.net/gze70ov2/1/
First initialize summernote on document ready.
And make sure you have included required resources for this to work in order-
<link href="font-awesome.css" rel="stylesheet"/>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="summernote.min.css" rel="stylesheet"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="summernote.min.js" type="text/javascript"></script>
Related
I just downloaded the auth0 quickstart vanilla JS single page application. The menu that you get when you resize the app, does not work.
instead, you get a error that says the collapse.js has a object error.
Okay, this should save some time to other folks who are using auth0.
The problem is here, in the second line.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For some reason, jquery-3.5.0 has some problems with the dropdown menu working. The following worked for me.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am using 3.4.1 jQuery (second line again, above). That got the menu working.
I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
Trying to make a custom polymer element in ASP.NET 5 in Visual Studio Community. I select "New Project"->"Web"->ASP.NET Core Web Application (.NET Core). In Solution Explorer I add a new file "helloworld.html", in this file I create a new polymer element with this code:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="hello-world">
<style></style>
<template>
<h1>Hello world</h1>
</template>
</dom-module>
<script>
Polymer({
is: "hello-world"
});
</script>
Next I try to implement (add) this element to the DOM that is created by ASP.NET 5, so I make changes in those two files index.cshtml and _layout.cshtml.
The file index.cshtml is:
#{
ViewData["Title"] = "Home Page";
}
<link rel="import" href="~/helloworld.html"/>
<div class="row">
<hello-world></hello-world>
</div>
In _layout.cshtml I add two lines of code:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
Next I click debug but no Hello World on the screen. Only header and footer from _layout.cshtml
I think
<link rel="import" href="~/helloworld.html"/>
must be outside the { ... }
If not, take a look at the source HTML code and, using F12 (IE/Chrome... debugger), see Network tab for errors.
In addition to what already has been suggested. Are you sure that
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
are in the right place? Load the page, open the developer tools (F12) and in the HTML/DOM view/explorer check that these lines actually appear in the <head> tag of the loaded page. The default ASP.NET Core template contains <environment> tags in _Layout.cshtml. In my test with your code I first put the links into the wrong environment. Now it works for me.
There is a page, http://www.getbootstrap.sk/customize/index.html, but after you finish and compile and download the completed zip file - NOWHERE is anything giving even a clue as what to do with the darn files. ( I just installed the standard package though bower ).
SO what am I supposed to do with the downloaded customize files?
ALl I'm really trying to do is to stop my navbar items from disappearing when the width falls below 768px - I don't want them ever to disappear.
Bootstrap. How to make the navbar never collapsed
In the Grid system set the field #grid-float-breakpoint value of 0.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
you don't need to download the library. You can use online libraries.
For example:
<!DOCTYPE html="en">
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Course</title>
<!-- Normalize -->
<link rel="stylesheet" href="https://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize.css" type="text/css">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- YOUR OWN CSS LIBRARY -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- JQUERY If you need it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- JS BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- YOUR OWN JS LIBRARY -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
....
</body>
</html>
However, if you want to download the library, you just have to move the bootstrap.min.css and bootstrap.min.js to the folders where you keep your CSS and your JS files, and reference them in the header of your web page.
For example:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
...
</head>
UPDATE:
Based on Bootstrap's documentation, I suggest that, in order to avoid collapsing of the navbar, delete the class navbar-collapse from any element of your navigation bar.
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse. The responsive navbar requires the collapse plug-in to be included in your version of Bootstrap.
Additionally, you have to delete the button that is shown every time the navbar collapses.
Something like jsfiddle
I will need to see your source code to help you in a better way. Meanwhile, I hope this help you.
I have recently got stuck in the following situation.
I have a script which works perfectly in FF and GC,but not in IE10.
The IE is not loading the jQuery src files,so therefore it triggers the error '$' is undefined.The loading part looks like this:
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" hrf="/RequestCenter/modules/resources/dist/jquery.jqplot.css" />
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.highlighter.min.js"></script>
my function is simple:
$(document).ready(function() { .... });
so,the IE10 doesn't load the jQuery and triggers the error on this line.
Any ideas how to find a work around would be really appreciated.
Thanks
It might be a browser mode or document mode compatibility issue, press F12 in IE and change your document mode to highest standard