jQuery UI Widgets Forums Scheduler Missing gridlines when remote

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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>
    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: BaseLight.

    Best Regards,
    Martin Yotov

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

    Missing gridlines when remote #120193

    olegb
    Participant

    Thank you !

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

You must be logged in to reply to this topic.