Table and search layout problem #6744 | Support Center

p.j.keukens created 5 years ago

Hi,

I'm using ASPNET ZERO (paid version) and then the .net core 2.2 + jquery version. At the moment I'm experiencing a problem with the user layout of the table views, whichgives a different layout every now and then. The problem shows in Firefox, chrome and Edge. When I go to the users page for example sometimes above the table their apaers a small search box on the right and the number of results selector on the left. At other times the footer of the table looks different then the normal version where pagination should be left and the number of results selecter and the number of results should be right. Look at the footer in the image underneath. (I don't have a screenshot of the search bar at the top of the table). I did not change anything from the downloaded demo template, just ran yarn and update bundles.

Then on the samepage the layout of the searchbar is off as well. It looks like the inside is bigger then the border and the right image moves over the border on the right. The problem exists in Firefox, Chrome and Edge. I did not change anything from the downloaded demo template, just ran yarn and update bundles. See the image below:

Please advice for a solution,

Patrick

9 Answer(s)

0

p.j.keukens created 5 years ago

Here is another image about the layout shifting to different layouts...

Do you see that there is a searchbox at the righthand side just above the table and the number of records selector is at the left just above the table. also the bottom of the table looks different to the image in the previous post.

Then after a refresh (and I'm not changing anything in the layout)
0

ismcagdas created 5 years ago
Support Team

Hi @p.j.keukens

Do you see any JavaScript error on the browser console when you face this problem ?
0

p.j.keukens created 5 years ago

No, there is no javascript error message in the console, the network tab says all files load correctly.

It's a bit weird because it seems to happen randomly.
0

p.j.keukens created 5 years ago

When I click the menu item the items apear at the bottom when I press CTRL-F5 it moves to the top with the search box. At least it apears like this
0

p.j.keukens created 5 years ago

Hi @ismcagdas,

I think I found out a little more, I'm using dutch as the main language instead of english.

Sometimes it loads Dutch.json for datatable and gets status code 200 response (then the table information is in dutch)

And sometomes it loads Dutch.json but it has status code 304 then the table is in english and the search box is above the table (layout is messed up)

Any ideas on how to solve this as it's not a consistent layout this way and ruins the experience.
0

ismcagdas created 5 years ago
Support Team

When the status code is 304, browser uses file from local cache I guess. Have you tried using the app with another browser for a while ?

p.j.keukens created 5 years ago

I think it's just a problem of messy code in the file "datatables.default.js".

In this block defaults are set for the datatables when the language file can be downloaded (watch dom and pagingType being declared here):

    $.ajax(translationsUrl)
        .fail(function () {
            translationsUrl = abp.appPath + 'Common/Scripts/Datatables/Translations/English.json';
            console.log('Language is set to English for datatables, because ' + abp.localization.currentCulture.displayNameEnglish + ' is not found!');
        }).always(function () {
            $.extend(true, $.fn.dataTable.defaults, {
                language: {
                    url: translationsUrl
                },
                lengthMenu: [5, 10, 25, 50, 100, 250, 500],
                pageLength: 10,
                responsive: {
                    details: {
                        type: 'column'
                    }
                },
                searching: false,
                pagingType: "bootstrap_full_number",
                dom: 'rt<"bottom"ilp><"clear">',
                order: []
            });
        });

Then just below that there is another initialization of the defaults of the datatables, this also contains a (different) dom and paging type:

    /* Set the defaults for DataTables initialisation */
    $.extend(true, $.fn.dataTable.defaults, {
        "dom": "<'row'<'col-md-6 col-sm-6'l><'col-md-6 col-sm-6'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-5'i><'col-md-7 col-sm-7'p>>", // default layout with horizontal scrollable datatable
        //"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without  horizontal scroll(used when bootstrap dropdowns used in the datatable cells)
        "language": {
            "lengthMenu": " _MENU_ records ",
            "paginate": {
                "previous": 'Prev',
                "next": 'Next',
                "page": "Page",
                "pageOf": "of"
            }
        },
        "pagingType": "bootstrap_number"
    });

So it might be that datatables.net doesn't properly handle the language files as sometimes I saw the table in english and sometimes in dutch which was weird because my default language was dutch. Also the layout of the pagination changed which I could understand looking at the configuration above.

@ismcagdas I think this needs sorting out by velosoft as it is not working properly and datatables are a main component of the application. I'm using version 6.9 the paid dotnet zero template.

best regards Patrick

0

ismcagdas created 5 years ago
Support Team

Thanks, created an issue here https://github.com/aspnetzero/aspnet-zero-core/issues/2327. We will investigate and fix the problem.
1

ydyazilim created 5 years ago

Hi, I'm using ASPNET ZERO (paid version) and then the .net core 2.2 + jquery version.

There are no JavaScript errors in the browser console when you encounter this problem. One warning available Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. this warning app-layout-libs.min.js under

Page and page numbering does not work properly. This Error exists only on Google Chrome.

Please advice for a solution,

Have an answer to this question? Log in and write your answer.