jQuery UI Widgets Forums Grid align headers

This topic contains 4 replies, has 2 voices, and was last updated by  nostromo 5 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • align headers #102713

    nostromo
    Participant

    it is possible to align the texts of the headings in top?

    align headers #102725

    Martin
    Participant

    Hello nostromo,

    You can achieve this by applying appropriate line-height css property to the div inside the grid column header.
    Here is an Example.
    You can also use the align property of the columns, if you need left or right alignment.

    Best Regards,
    Martin

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

    align headers #102731

    nostromo
    Participant

    Dear, your example works excellent in JSFiddle, but if I reply it as is in my site it does not have the same effect as I see in the example.

    example: if I apply 25px to the style in your example the headings are left as I want, but in my site they move but very little. If I go down to 10, it does not go up much either, something I must have wrong, I attach my complete code to see if you can help me.

    I’m using chrome

    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Documento sin título</title>
    <link rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
    <script type=”text/javascript” src=”/jquery/jquery-3.2.1.min.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/jqxgrid.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxgrid.selection.js”></script>

    <script language=”javascript” type=”text/javascript”>
    $(document).ready(function(){
    var data = new Array();
    var firstNames = [
    “Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”];
    var lastNames = [
    “Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”];
    var productNames = [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”];
    var priceValues = [
    “2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”];
    for (var i = 0; i < 100; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row[“productname”] = productNames[productindex];
    row[“price”] = price;
    row[“quantity”] = quantity;
    row[“total”] = price * quantity;
    data[i] = row;
    }
    var source = {
    localdata: data,
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) {}
    });
    $(“#jqxgrid”).jqxGrid({
    theme: ‘energyblue’,
    altrows: true,
    width: 500,
    source: dataAdapter,
    columnsheight: 50,
    columns: [{
    text: ‘First Name’,
    datafield: ‘firstname’,
    width: 100
    }, {
    text: ‘Last Name’,
    datafield: ‘lastname’,
    width: 100
    }, {
    text: ‘Product’,
    datafield: ‘productname’,
    width: 180
    }, {
    text: ‘Quantity’,
    datafield: ‘quantity’,
    width: 80,
    cellsalign: ‘right’
    }, {
    text: ‘Unit Price’,
    datafield: ‘price’,
    width: 90,
    cellsalign: ‘right’,
    cellsformat: ‘c2’
    }, {
    text: ‘Total’,
    datafield: ‘total’,
    width: 100,
    cellsalign: ‘right’,
    cellsformat: ‘c2’
    }]
    });
    });
    </script>

    <style type=”text/css”>
    .jqx-grid-column-header div { line-height: 25px !important; }
    </style>
    </head>

    <body>
    <div id=”jqxgrid”></div>
    </body>
    </html>

    • This reply was modified 5 years, 8 months ago by  nostromo.
    align headers #102739

    Martin
    Participant

    Hello nostromo,

    It seems as this is because you are not using the latest version of jQWidgets.
    Try adding margin-top: 0 !important; to the same element:

    .jqx-grid-column-header div {
        line-height: 25px !important;
        margin-top: 0 !important;
     }

    Best Regards,
    Martin

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

    align headers #102746

    nostromo
    Participant

    Excellent, it worked.

    I’m actually using the version jQWidgets v5.6.0

    Thank you very much for your time

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

You must be logged in to reply to this topic.