i have a project which uses the below depedencies:
<head>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="parsley/dist/parsley.min.js"></script>
<link rel="stylesheet" type="text/css" href="parsley/parsley.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/bootstrap-datepicker1.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
In that project, i want to add multiple depedent dropdown lists like that:
<div class="col">
<select name="category_item" class="form-control input-lg" id="category_item" data-live-search="true" title="select category"></select>
</div>
<div class="col">
<select name="sub_category_item" id="sub_category_item" class="form-control input-lg" data-live-search="true" title="select subcategory"></select>
</div>
</div>
I've always developed this idea, using the below depedencies:
<head>
<title>Website</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The problem appears, when i add my depedencies in project's depedencies, resulting not-functional dropdown lists. How can i combine depedencies, in order to have project's style and normal operation of my dropdown lists?
Related
I have a top nav bar on homepage(_Layout.cshtml) that has a toggler button, after removing some style sheets my button became visible but it is not working!!..
Here are my scripts and links
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
#RenderSection("preheader", required: false)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
#*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">*#
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" /> F
#RenderSection("header", required: false)
</head>
<body>
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script><!--removing it stops testnav toggle-->
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
</body>
However when I add same navbar in content-page that content-page button works!!
I have tried adding all scripts on top of original jquery and bootstrap scripts to that page it still works!!
TestNavBar.cshtml (content-page)
#section header{
<style type="text/css">
</style>
<!--Copied from home page (Layout)-->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" />
<!--Original Scripts-->
<link href="~/safety/css/leaflet.loading/Control.Loading.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="~/safety/css/jquery-json-viewer/jquery.json-viewer.css" rel="stylesheet" />
<link href="~/safety/css/ChartJS/Chart.min.css" rel="stylesheet" />}
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$.backstretch("/images/netrisk-background.jpg");
});
</script>
<!--Copied from home page (Layout)-->
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
#*
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
*#
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js"></script>
<script src="~/js/app/site.js" asp-append-version="true"></script>
<!--Original scripts-->
<script src="~/safety/js/App/SafetyGlobalSetting.js"></script>
<script src="~/safety/lib/jquery-datatables-js.min.js"></script>
<script src="~/safety/js/plugin/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="~/safety/js/plugin/CounterUp/jquery.counterup.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="~/safety/js/App/PointSelection.js"></script>
<script src="~/safety/js/plugin/leaflet.tilelayer.HERE/leaflet-tilelayer-here.min.js"></script>
<script src="~/safety/js/plugin/leaflet.loading/Control.Loading.min.js"></script>
<script src="~/safety/js/plugin/leaflet.geometry/leaflet.geometryutil.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="~/safety/js/ChartJS/Chart.bundle.min.js" type="text/javascript"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/freezable/leaflet.markercluster.freezable.js"></script>
<script src="~/mdbootstrap-pro/js/mdb.min.js" type="text/javascript" ></script>
}
I have a basic CRUD web app with Spring and thymeleaf, I have a fragmented navbar that I use in each page but whenever I have a page with a datetimepicker the navbar is conflicted (basically navbar parts are mixed up and don't work). So below is my home page, which works fine (no datetimepicker), but in my newEmployees page I have the same bootstrap, jQuery etc links and sources as 'home' but as soon as I add the datetimepicker code the navbar is wrong, also I have to remove:
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
for the datetimeicker to work, but with my minimal jquery understanding, isn't that whats is needed for the navbar? Is something conflicting here?
home.html works fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css" >
<link rel="stylesheet" type="text/css" href="/css/ines.css" >
<title>InES Employee</title>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<div th:replace="/fragments/deleteModal :: deleteModal"></div>
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="#{/js/home.js}"></script>
</body>
</html>
home.js
$(' #deleteButton').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#deleteModal #delRef').attr('href', href);
$('#deleteModal').modal();
});
setInterval(function(){ $(".alert").fadeOut(); }, 3000);
newEmployee.html cant get navbar to work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>InES Employee</title>
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/css/newEmployee.css">
<!--datetimepicker code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<!-- <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>-->
<!-- <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>-->
<script th:src="#{/js/newEmployee.js}"></script>
</body>
</html>
newEmployee.js
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
correct navbar
incorrect navbar
Thanks in advance!
Greeting, I'm unable to align date picker inline the code which I used is below. date picker element goes into a new line rather on the same line.
your help is very much appreciated. thank you.
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> On this date <input id="datepicker" width="270" /> i accept the offer.</p>
</body>
</html>
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> On this date <div style="display:inline-block"><input id="datepicker" width="270" /> </div> i accept the offer.</div>
</body>
</html>
I want to integrate a multiselect dropdown list in my web page. But the list does not show the dropdown menu when click.The dropdown displays its menu if i remove bootstrap.min.css from head tag, but the menus not aligned well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Money Withdrawal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-
select.min.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript">
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-6 mx-auto">
<label class="text-white mb-3 lead">Where do you live?</label>
<!-- Multiselect dropdown -->
<select multiple="" class="selectpicker" id="exchange_p" tabindex="-98">
<option>BSE</option>
<option>NSE</option>
<option>NCDEX</option>
<option>MCX</option>
<option>NSDL</option>
<option>ICEX</option>
</select>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap- select.min.js">
</script>
</body>
</html>
I cannot scroll the page even if the content inside require to scroll it. The page is cut. http://medica.mastertools.net/. You can login (fake form just submit).
No overflow:hidden in the css.
Is maybe due to the viewport that is not set?
Below the html code of the main page, I have used Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
/>
<title><?=SITETITLE?></title>
<meta name="keywords" content="Medica" />
<meta name="description" content="Medica Webshop" />
<link rel="stylesheet" type="text/css" media="print" href="<?
=HTTPPATH?>css/print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?
>css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/styleNew.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/library.js"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/validation.js"></script>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<body>
<?php $this->view('new/header'); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6 align-self-center">
<?=$main_content?>
</div>
<div class="col-sm-3">
<?=$right?>
</div>
</div>
</div>
<div id ="bottom" class="fixed-bottom"> <?=$footer?> </div>
</body>
</html>
Your body tag does have overflow:hidden set, on line 21 of screen.css. Change that to overflow:auto and you should be all set.