fullCalendar doesn't show the calendar on PhoneGap when launched on device (Android ICS).
However the content is loaded via Chrome or Firefox, it loads normally and the content can be seen. I've also tried to run the fullCalendar demos by itself without any custom code inside phonegap and the calendar does not render.
<!DOCTYPE HTML>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="./fullcalendar/fullcalendar.css">
<link rel="stylesheet" href="./fullcalendar/fullcalendar.print.css" media="print">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="./fullcalendar/fullcalendar.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,today,next',
right: 'agendaDay'
},
defaultView: "agendaDay",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'Morning Status Meeting',
start: new Date(y, m, d, 9, 30),
allDay: false
},
{
title: 'Lunch meeting with John Appleseed',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 13, 30),
allDay: false
},
{
title: 'Android Product Review',
start: new Date(y, m, d, 14, 0),
end: new Date(y, m, d, 15, 0),
allDay: false
},
{
title: 'Andrew and Matthew\'s baseball finals',
start: new Date(y, m, d, 17, 0),
end: new Date(y, m, d, 19, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 400px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 400px;
background-color: white;
}
</style>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="service-booking" data-theme="b">
<div data-role="header">
<h1>Service Appointment Booking</h1>
Options
</div>
<div data-role="content" class="ui-content" role="main">
<div class="ui-grid-a">
<div class="ui-block-a" width="300">
<div id='wrap'>
<div id='calendar'></div>
</div>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I have some problems showing margin on Android. Try without margin.
Related
I have made some markers on my map, each marker represents a report sent from that location.
I want to do that when I click on a specific marker I'll have its information on a popup.
The info is stored in a SQL database and it contains Category, Title, Remarks(Description), statUrgence(Urgence) & images Path(path). You can see it in the code as #_Data.Category ...
Code:
<link rel="stylesheet" href="~/css/ol.css">
<link rel="stylesheet" href="~/css/ol-ext.css">
<script src="~/js/ol.js"></script>
<div id="map" style="position: fixed; top: 62.5px; left: 0; bottom: 65px; right: 0; z-index:-1"></div>
<style>
.ol-zoom {
top: 2.5%;
}
</style>
<script type="text/javascript">
var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 5,
center: [166326, 5992663]
}),
interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
layers: layers
});
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
//Tried to make here that when a marker is clicked something will happen, wasn't much of a success
// Vector Feature Popup logic
map.on('click', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
console.log(feature, layer);
})
})
</script>
#{
if (Model != null)
{
foreach (var _Data in Model)
{
#*Saving the data that needs to be in each marker*#
#*<div class="card" id="overlay-container-#_Data.Id" style="display:none;">
<div class="card-header">
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
</div><br />
<div class="card-body">
<p>
<u>Description</u>: <br />#_Data.remarks
</p><br />
<u>Urgence</u>: #_Data.statUrgence <br />
</div>
<div class="card-footer">
#_Data.path
</div>
</div>*#
<script>
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png'
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
markers.getSource().addFeature(marker);
</script>
}
}
}
Include the properties you need in the popup as properties of the features, then you can copy them to the popup as required, as with name in https://openlayers.org/en/latest/examples/icon.html Complex popups can be created and styled as in https://openlayers.org/en/latest/examples/popup.html
End result of that using a simple subset of your properties and no extra css
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.1.0/ol/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.1.0/ol/dist/ol.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<script>
/**
* Elements that make up the popup.
*/
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
/**
* Add a click handler to hide the popup.
* #return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
const Model = [
{
category: 'Capital city',
title: 'London',
long: -0.12755,
lat: 51.507222,
description: 'UK capital',
},
{
category: 'Capital city',
title: 'Rome',
long: 12.5,
lat: 41.9,
description: 'Italy capital',
},
{
category: 'Capital city',
title: 'Bern',
long: 7.4458,
lat: 46.95,
description: 'Switzerland capital',
},
];
/**
* Create the map.
*/
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7.5, 47]),
zoom: 3,
}),
});
const features = [];
for (key in Model)
{
const _Data = Model[key];
const feature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([parseFloat(_Data.long), parseFloat(_Data.lat)])
),
category: _Data.category,
title: _Data.title,
description: _Data.description,
});
features.push(feature);
}
const markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: features,
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png',
}),
}),
});
map.addLayer(markers);
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
const coordinates = feature.getGeometry().getCoordinates();
content.innerHTML =
'<p>Category:</p><code>' + feature.get('category') + '</code><br>' +
'<p>Title:</p><code>' + feature.get('title') + '</code><br>' +
'<p>Description:</p><code>' + feature.get('description') + '</code>'
overlay.setPosition(coordinates);
}
});
</script>
</body>
</html>
Having trouble wrapping the Title and Time on FullCalendar v5. By changing .fc-daygrid-event to have white-space: normal I can get the title to wrap, but it's not right:
(Top day is with whitespace adjust, bottom is default)
What I'm looking for is:
Which has the title inline with the time, and wrapping under the time.
What voodoo should I do to achieve this?
You can solve it by adjusting the alignment as well:
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
Demo: https://codepen.io/ADyson82/pen/poPaMBW
In order to break and make it into two line here is a work around
.fc-daygrid-event{
display: block!important;
padding-left: 15px!important;
}
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc-daygrid-event-dot{
display: inline-flex;
position: absolute;
left: 0px;
top: 6px;
}
.fc-event-time,.fc-event-title{
display: inline;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
center: "title",
left: "prevYear,prev,next,nextYear"
},
events: [
{
title: "Friday Throwdown",
start: new Date(y, m, 2, 10, 30),
end: new Date(y, m, 2, 11, 30),
allDay: false
},
{
title: "Marketing Meeting",
start: new Date(y, m, 2, 11, 30),
end: new Date(y, m, 2, 12, 30),
allDay: false
},
{
title: "Production Meeting",
start: new Date(y, m, 2, 15, 30),
end: new Date(y, m, 2, 16, 30),
allDay: false
}
]
});
calendar.render();
});
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc-daygrid-event{
display: block!important;
padding-left: 15px!important;
}
.fc-daygrid-event-dot{
display: inline-flex;
position: absolute;
left: 0px;
top: 6px;
}
.fc-event-time,.fc-event-title{
display: inline;
}
.fc-daygrid-day{
overflow:hidden;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
If u wana hide the overflowing text
.fc-daygrid-day{
overflow:hidden;
}
Iam trying to get familiar with FullCalendar. Iam using pure Javascript and my problem is that in daygrid-weekgrid view all events are placed in the bottom, even if i resize the row height. Currently i use the default FullCalendar template. Below there are the respective files and one screenshot of my awful calendar:)
extends layout2
block content
div(id='calendar')
script.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var initdate = new Date();
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: initdate,
height: '100%',
handleWindowResize:true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2021-04-01'
},
{
title: 'Long Event',
start: '2021-04-07',
end: '2021-04-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-04-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-04-16T16:00:00'
},
{
title: 'Conference',
start: '2021-04-16T19:00:00',
end: '2021-04-20'
},
{
title: 'Meeting',
start: '2021-04-12T10:30:00',
end: '2021-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-04-28'
}
]
});
calendar.updateSize();
calendar.render();
});
layout2
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
script(src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.3.0/main.min.js")
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")
link(rel='stylesheet', href='/stylesheets/centeredforms.css')
body
div(class='container-fluid')
div(class='row')
div(class='col-sm-2')
block sidebar
ul(class='sidebar-nav')
li
a(href='/catalog') Home
li
a(href='/catalog/resources') All Resources
li
a(href='/catalog/books/create') Make a booking
li
a(href='/catalog/bookings') My Bookings
if(role=="admin")
block sidebar
ul(class='sidebar-nav')
li
hr
li
a(href='/catalog/resources/create') Create new Resource
li
a(href='/catalog/users') Get all users
li
div(class='col-sm-10')
block content
CSS style
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
#calendar {
margin: 40px auto;
}
tr{
height: auto;
}
li{
list-style-type: none;
}
table {
background-color: white;
width: 100%;
}
tr:nth-child(even) {
background-color: #d7d7d7;
}
tr:hover{
color: #6bbaef;
}
form{
text-align:center ;
}
button{
align-self: center;
}
img{
width: 250px;
height: 250px;
}
So the problem was in layout2 file at link(rel='stylesheet', href='/stylesheets/centeredforms.css'), this is my customized stylesheet so, my calendar used this instead of this link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.6.0/main.min.css")
In conclusion replace the cdn stylesheet and you will have a nice functional calendar. Also if you include bootstrap styles then it will be nicer
I am getting the above errors while trying to add a c3js/d3js graph. I am using d3 v5 for this project.
I also have bootstrap 3 linked to the html.
<head>
<title>Default</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
</head>
Strangely enough, if I remove the bootstrap.min.css line, the graph works, but obviously bootstrap doesn't work. Hence the conflict.
What can I do to make them work together? I know there are projects where they both work together, I just can't figure out how.
The following snippet demonstrates the issue:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
Working jsFiddle without bootstrap.css
Not working jsFiddle with boostrap.css
The Bootstrap CSS seems to conflict with the way C3.js calculates the dimensions of the container into which the chart is rendered. This can be solved by overriding the implicit height as determined by C3 with the configuration parameter size.height.
size: {
height: 320
}
Have a look at the updated working demo:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
size: {
height: 480
},
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
So I think my site is responsive so far. Inside my div tag with the id "navResult" I render partial views. The site is responsive to how much data is inside the element. But for some reason when I load a partial view with a chartJS chart the site doesn't respond to the parameters of the chart. Instead, a scroll bar is added like so, "https://ibb.co/ceRenw". I don't believe this has anything to do with MVC, but more with plain HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title MM-3</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/unobtrusive")
#model IEnumerable<RoboticUI.Models.ResultantRead>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/AutocompleteScript.js"></script>
<script src="~/Scripts/chartJsTrial.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
</head>
<body style="font-family:Verdana;">
<div class="container">
<header>
<div class="headerContent">
<p>Robot Gallery</p>
</div>
</header>
<div class="menu-content" style="overflow:auto">
<div class="menu">
<p>#Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
</div>
<div id="navResult" class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<footer>Copyright © MMM</footer>
</div>
#RenderBody()
</body>
</html>
external style sheet.
header, footer {
background-color: #68bbff;
height: 5%;
text-align: center;
}
div.headerContent p{
display:inline-block;
}
div.headerContent p.CompanySearchBar{
float:right;
}
div.container {
width: 100%;
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.menu {
float: left;
width: 5%;
text-align: center;
}
.menu-content {
padding-bottom: .2em;
}
.menu a {
border: 2px solid #4CAF50;
border-radius: 15px 100px;
text-align: center;
font-size: 12px;
display:block;
padding:20px;
}
.menu a:hover{
background-color:#4CAF50;
}
.main {
float: left;
width: 95%;
padding: 0 20px;
}
#media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
Code to call the chart
console.log('test');
function getFun() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Simple Column Chart in ASP.NET MVC"
},
subtitles: [
{ text: "Try Resizing the Browser" }
],
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
//Uncomment below line to add data coming from the controller.
}
]
});
chart.render();
}
and the chart is called inside this partial view.
#{
}
<link rel="stylesheet" type="text/css" href="~/Content/Data.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
<div id="chartContainer">
</div>
I believe I fixed my problem by adding style="overflow: -webkit-paged-x;" to each div that holds a chart. But, is was that the right thing to do? Is there another approach. I don't want to have to add style="overflow: -webkit-paged-x;" every single time I create a chart.