align headers - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

align headers Posts
November 9, 2018 at 6:33 pm align headers #102713

nostromo
Participant

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

November 12, 2018 at 8:07 am 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/

November 12, 2018 at 1:25 pm 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>

November 13, 2018 at 6:24 am 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/
November 13, 2018 at 12:10 pm 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
Author

Posts

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

You must be logged in to reply to this topic.