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.
Related
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?
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 have the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>
</body>
</html>
This HTML works fine, however when I change leaflet to a new version,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<!--<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />-->
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src='https://unpkg.com/leaflet#1.0.1/dist/leaflet.js'></script>
<link href='https://unpkg.com/leaflet#1.0.1/dist/leaflet.css' rel='stylesheet' />
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>
</body>
</html>
I got the error;
TypeError: t is undefined
Could any leafletjs expert help me to figure out what is going on, please?
I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:
JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
I just want to ask how can I disable responsiveness of Bootstrap. I currently followed the instructions in the tutorial but I can't make my page non-responsive.
What I did in my code is:
1. I removed the viewport in meta tag
2. Set a width in the class .container
When I resized my windows the 3 columns are became responsive.
Here's my sample fiddle
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chuosenko</title>
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./third_party/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="./third_party/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="./third_party/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./js/packery.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<h1>COL 1</h1>
</div>
<div class="col-md-4">
<h1>COL 2</h1>
</div>
<div class="col-md-4">
<h1>COL 3</h1>
</div>
</div>
</body>
</html>
Here's my css:
.container {
width: 1280px;
max-width: none !important;
}
Can you help me with this?
use col-xs-* class for grid. Like suggested in the tutorials.