Summernote dropdown doesn't work with Bootstrap 5, please help with the below code. The error says Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip.
<html lang="en"><head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-12 mt-3">
<div id="summernote"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#summernote').summernote(
{height:300,
}
);
$('.dropdown-toggle').dropdown();
});
</script>
</body></html>
Codepen link https://codepen.io/murli-vm/pen/XWpLqpp
Related
I would like to let the modal keep open if there are errors,but the modal will not auto open when there are errors
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<script src="{{ url('/js/jquery.min.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
#if($errors->any())
<script type="text/javascript">
$(document).ready(function(){
$('#modal-title').modal('show');
});
</script>
#endif
modal
<form action="/employee" class="action" method="POST">
#csrf
<div class="fixed z-10 inset-0 overflow-y-scroll" aria-labelledby="modal-title" id="modal-title" role="dialog" aria-modal="true"
x-show="open">
try this
<script type="text/javascript">
#if (count($errors) > 0)
$('#modal-title').modal('show');
#endif
</script>
I decided to try Bootstrap 4. I have rather a simple HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10">
</div>
<div class="col-1">
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
But when I hover the latest col-1 element in the developer tools, the horizontal scrollbar appears. Look at the image below.
Firefox bug
Who have any ideas how to wrastle with it?
your code is okay
I tried it in Google chrome, and the horizontal scrollbar doesn't appear
also I download firefox and installed it, then tried what you made, and there is no horizontal scrollbar as well
You may have an error in your firefox, you may download the new version from here;
https://www.mozilla.org/en-US/firefox/new/
I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>
I am creating a blog with a Summernote editor.My problem is the editor does not display properly in blog text area.
I use partials to created forms and the js and css files were linked this way
<div class="form-group" id="summernote">
{!! Form::label('body', 'Body') !!}
{!! Form::textarea('body', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit($submitButtonText,['class' => 'btn btn-primary']) !!}
</div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
master layout
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/summernote.css">
</head>
<body>
#include('partials.nav')
<main>
<div class="container">
#include('flash::message')
#yield('content')
</div>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
/*$('div.alert').not('.alert-important').delay(3000).slideUp(300);*/
$('#flash-overlay-modal').modal();
</script>
<script src="../js/summernote.js"></script>
#yield('footer')
</body>
</html>
How do you link and use Summernote in Laravel?This is my 1st week in Laravel, and I am trying to learn by creating a simple blog with Twitter Bootstrap
It should be:
<link rel="stylesheet" type="text/css" href="<?= asset('css/summernote.css') ?>">
Same principle for js.