How to center Loading Text & Image inside grid ?

[ahmed.mo.aminParticipant]

Hi

first i want to thanks all team for this nice tools that make my web App awesome … 🙂

i have finish my grid data and styling but i need to know how can i center Loading Text & Image Vertical & Horizontal inside the grid

as you see in image it’s not in the center

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

It looks like you’ve modified some CSS styles or your page has no DOCTYPE? All texts in your Grid seems to be in Bold. Something in the changed CSS conflicts with the Loader Image’s positioning.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

i just add css to set font bold

.cell {
    font-weight: bold;
}

.jqx-grid-column-header, .jqx-grid-columngroup-header {
    font-weight: bold;
}

i don’t think it will make any conflict with Loader Image’s positioning !!

hope to find help with that please

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

Sorry, but it’s not only these. Ex: http://jsfiddle.net/jqwidgets/xw692v5q/

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

this is full JS code:

$(document).ready(function () {
    // prepare the data
    var source = {
        datatype: "json",

        datafields:
        [
            { name: 'acc_no', type: 'number' },
            { name: 'Acc_Nm_AR', type: 'string' },
            { name: 'attn', type: 'string' },
            { name: 'total_tax', type: 'number' },
            { name: 'TOT_WT', type: 'number' }
        ],

        url: '/TaxMid/GetCustomers',
    };

    var dataAdapter = new $.jqx.dataAdapter(source);//fine dataadapter

    $("#jqxgrid").jqxGrid({
        source: dataAdapter,
        rtl: true,
        pageable: true,
        autoheight: true,
        theme: 'darkblue',
        width: '100%',
        columns:
            [
                { text: 'كود العميل', dataField: 'acc_no', align: 'center', cellsalign: 'center', width: '10%', cellclassname: "cell" },

                { text: 'إسم الصيدلية', datafield: 'Acc_Nm_AR', align: 'center', cellsalign: 'right', width: '25%', cellclassname: "cell" },

                { text: 'إسم العميل', datafield: 'attn', align: 'center', cellsalign: 'right', width: '25%', cellclassname: "cell" },

                { text: 'إجمالى الضريبة', datafield: 'total_tax', align: 'center', cellsalign: 'center', width: '15%', cellclassname: "cell" },

                { text: 'إجمالى المسحوبات', datafield: 'TOT_WT', align: 'center', cellsalign: 'center', width: '15%', cellclassname: "cell" },

                {
                    text: '',
                    datafield: 'Edit',
                    columntype: "button",
                    cellclassname: "primary",

                    cellsrenderer: function () {
                        return "تعديل";
                    },

                    buttonclick: function (row) {
                        editrowindex = row;
                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "acc_no");
                        window.location = '/Customers/Edit/' + id;
                    },

                    width: '5%'
                },

                {
                    text: '',
                    datafield: 'Details',
                    columntype: "button",
                    cellclassname: "success",

                    cellsrenderer: function () {
                        return "عرض";
                    },

                    buttonclick: function (row) {
                        editrowindex = row;
                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "acc_no");
                        window.location = '/Customers/Details/' + id;
                    },

                    width: '5%'
                }
            ]
    });
});

this is full CSS code:

.cell {
    font-weight: bold;
}

.success .jqx-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.primary .jqx-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.jqx-grid-column-header, .jqx-grid-columngroup-header {
    font-weight: bold;
}

Please where is conflict ?
Note: i download jQuery UI Widgets from Nuget

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

Here’s the sample used with your CSS and darkblue theme: http://jsfiddle.net/jqwidgets/rs4x76h6/. Note that it still does not look as in your image i.e the Loading image is not in Bold which leads me to assumption that you have Global setting for font-weight: bold for all HTML Elements.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

Thanks a lot Peter Stoev

i have see that the problem is from bootstrap – if i remove it everything is fine, any idea how to fix that ?

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

Check the Bootstrap integration samples and help topics.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

Thanks

i see the example but i can’t understand what i must do “i set grid theme to be bootstrap but still nothing and i need darkblue theme”- sorry for that ?

can you please provide me with sample example depending my grid code to let me understand it

thanks for your concern

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

Prepare and share jsfiddle.net sample to illustrate your issue please.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

Hi

i have add this https://jsfiddle.net/ahmed_amin/tuttue02/7/

hope it can help

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

The loading image according to me is centered in the provided fiddle.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

Sorry for that

https://jsfiddle.net/ahmed_amin/tuttue02/9/

the css make the problem is in div contain the grid div

<div class="container body-content">
<div id="jqxgrid"></div>
</div>

css make the problem is:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

if i remove css class from main div i get loader centered – so please how can fix that and let work with this class ?

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

Are you sure, because I still don’t see a problem in the provided fiddle. The Loader is centered. But hey, you can turn it off if you wish – http://jsfiddle.net/jqwidgets/HgU6P/

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

Hi

Yes i’m sure – the problem related with screen size,

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

i work around it by edit the jqxgrid.js file and set this section as:

div style="z-index: 99999; margin-left: -66px; left: 44%;

here when ( left is 44% ) the loader was centered … 🙂

hope to make option for that soon

[Author]

Posts