Missing gridlines when remote - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: gridLines, localhost, remote, scheduler

This topic contains 2 replies, has 2 voices, and was last updated by olegb 3 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Missing gridlines when remote Posts

May 17, 2021 at 12:18 pm Missing gridlines when remote #120141

olegb

Participant

** THIS IS A REPOST AS MY ORIGINAL POST DISAPPEARED **

I have a very weird and unusual problem that I have been trying to fix for hours, trying everything possible under the sun and nothing works. I boiled it down to a simple file to illustrate the problem. Its a same exact file (see listing below) on the same browser (Edge, we also tried in Chrome, same problem).

THe code is a simple example I pulled from one of the pages here. This example works and renders perfectly when I open it locally. When I put it on the REMOTE server, its missing vertical lines and has some distortion.

Here is a link to a local rendering (good): https://photos.app.goo.gl/o2s7WDfcAmBJ3oeP9
Here is a link of the same file on the remove server (bad): https://photos.app.goo.gl/hqWsZzNg74uKnG64A …note missing vertical lines, gray, shading..etc.,

PLEASE HELP ..this is very urgent as we are in the final stages of the presentation and at the point of moving to remote, we get this issue.

Thank you in advance.

Oleg

<!DOCTYPE html>
<html lang="en">

<head>
    <title id='Description'>jqxScheduler widget displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month views
    </title>

    <!-- <link rel="stylesheet" type="text/css" href="normalize.css"> -->

    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./scripts/demos.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="./jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="./jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var appointments = new Array();

            var appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Quarterly Project Review Meeting",
                calendar: "Room 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }

            var appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }

            var appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }

            var appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }

            var appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }

            var appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);

            // prepare the data
            var source = {
                dataType: "array",
                dataFields: [{
                    name: 'id',
                    type: 'string'
                }, {
                    name: 'description',
                    type: 'string'
                }, {
                    name: 'location',
                    type: 'string'
                }, {
                    name: 'subject',
                    type: 'string'
                }, {
                    name: 'calendar',
                    type: 'string'
                }, {
                    name: 'start',
                    type: 'date'
                }, {
                    name: 'end',
                    type: 'date'
                }],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                view: 'weekView',
                showLegend: true,
                ready: function() {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources: {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields: {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "location",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views: [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>

<body class='default'>
    <div id="scheduler"></div>
</body>

</html>

May 18, 2021 at 9:14 am Missing gridlines when remote #120147

Martin

Participant

Hello olegb,

The examples from the screenshots that you have shared are using two different themes.
The first one is using the base theme while the second one is using the light theme.
You can see the differences in this demo example: Base – Light.

Best Regards,
Martin Yotov

jQWidgets Team
https://www.jqwidgets.com/

May 22, 2021 at 4:54 pm Missing gridlines when remote #120193

olegb

Participant

Thank you !

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.