Bad alignment of the column header separator and separator columns in mx:DataGrid.

Hi all

I use a mx:DataGrid control in my project of extension for InDesign CS5/CS55.5/CS6. I personalized the style attributes of the DataGrid control to change its appearance as shown in the following image.

Question: As we see in the picture that after changing this style attribute separator column header is not aligned with separator of columns of the DataGrid body (more clearly shown in the zoomed image).

I also found that if I remove the "headerColors" property then it seems (maybe because of camouflage of the dividing line white with the default color of the header, as shown in the image below).

Any suggestion/solution to correct this lack of alignment.

Notice that I must use this dark color appearance. I used FlashBuilder4.6, ExtensionBuilder2.1, ExtensionBuilder 3.4 SDK on Mac OS X 10.7.5.

Here is the source code,

DataGridExtension.mxml
<? XML version = "1.0" encoding = "utf-8"? > "" < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout ="absolute" historyManagementEnabled = "false"applicationComplete = "colorSync ()" creationComplete = "creationCompleteHandler (event)"> " < mx:Script > <! [CDATA] Import mx.collections.ArrayCollection; Import mx.events.FlexEvent; [Bindable] private var itemsObject:ArrayCollection = new ArrayCollection(); public function colorSync():void{}

DataGridExtension.mxml

<? XML version = "1.0" encoding = "utf-8"? >

"" < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout ="absolute" historyManagementEnabled = "false"applicationComplete = "colorSync ()" creationComplete = "creationCompleteHandler (event)"> "

< mx:Script >

<! [CDATA]

Import mx.collections.ArrayCollection;

Import mx.events.FlexEvent;

[Bindable]

private var itemsObject:ArrayCollection = new ArrayCollection();

public function colorSync():void{}

AutoTheme.sync ();

}

protected function creationCompleteHandler(event:FlexEvent):void

{

itemsObject.addItem ({'page':'Page 01' 'status':"ready",'observation':'high quality'});

itemsObject.addItem ({'page':' Page 02' 'status':'Waiting','observation':'low quality''});

itemsObject.addItem ({'page':'Page 03' 'status':"ready",'observation':'high quality'});

itemsObject.addItem ({'page':'Page 04' 'status':"ready",'observation':'high quality'});

itemsObject.addItem ({'page':'Page 05' 'status':'Waiting','observation':'low quality'});

itemsObject.addItem ({'page':'Page 06' 'status':"ready",'observation':'high quality'});

itemsObject.addItem ({'page':'Page 07' 'status':"ready",'observation':'high quality'});

}

[]] >

< / mx:Script >

< mx:Style >

MX | DataGrid { }

headerColors: #333333, #333333

alternatingItemColors: #222222 #252525

textRollOverColor: #FFFFFF

textSelectedColor: #FFFFFF

color: #CDCDCD;

borderStyle: solid;

rollOverColor: #333333

selectionColor: #444444

-color of the border: #222222

textSelectedColor: #ffffff

dropShadowEnabled: fake

cornerRadius: 4

}

< / mx:Style >

"" < mx:VBox height = "100%" width ="100%" verticalAlign = "middle" horizontalAlign ="center">

" < mx:Spacer height ="10"width ="100%"/ >

"" " < mx:DataGrid id ="pageDataGrid"dataProvider =" itemsObject{}"verticalAlign ="middle"width ="100%"buttonMode ="true"height ="100%">

< mx:columns >

"" < mx:DataGridColumn dataField = "page" headerText ="Page" width = "50"/ > "

"" < mx:DataGridColumn dataField = "status" headerText ="status" width = "50"/ > "

"" < mx:DataGridColumn dataField = "Note" headerText ="Note" width = "100"/ > "

< / mx:columns >

< / mx:DataGrid >

< / mx:VBox >

< / mx:Application >

OK, the header separator is 2 pixels wide and that's why he is not in line with the separation of body that is only 1 pixel wide.

Thank you. I solved the problem by adding a 'programming skin' based on 'mx.skins.halo.DataGridHeaderSeparator' that I defined for 'headerSeparatorSkin' mx:DataGrid property.

I also tried adding a 'graph skin' by using a PNG image with a width of line 1 file x 22 pixels. This fixed the misalignment, but another problem because of which the last separator becomes 2 pixel wide while all others were 1 pixel wide.

Here I post my code snippets for others,

1. Add a new MyDataGridHeaderSeparator.mxml file for programmatic skin as follows (for example in the View.skin package).

MyDataGridHeaderSeparator.mxml
http://www.Adobe.com/2006/mxml '. xmlns:haloSkins = "" MX.skins.Halo. * ">" /** * Replaced it draw the line splitter in the DataGrid header columns. Since the default * implementation was originally 2 numbers when headerColors style in the DataGrid property changes * to match with the theme of dark color of the overall expansion, * 1. Misalignment of the separator in the header with the separation of body. * 2. Draw lines of separation of 2 pixels with the first in color light gray and others in dark grey. **/ override protected function updateDisplayList(unscaledWidth:Number,_unscaledHeight:Number):void {} The line width value 1 pixel to draw lines 1 pixel wide divider. graphics.lineStyle (1, 0 x 000000); Go from x = 0 to x = 1 to solve the problem of misalignment. graphics.moveTo (1, 0); Draw the line of separation of (1,0) (1, unscaledHeight). graphics.lineTo (1, unscaledHeight); } ]]>

MyDataGridHeaderSeparator.mxml

http://www.Adobe.com/2006/mxml '.

xmlns:haloSkins = "" MX.skins.Halo. * ">"

/**

* Replaced it draw the line splitter in the DataGrid header columns. Since the default

* implementation was originally 2 numbers when headerColors style in the DataGrid property changes

* to match with the theme of dark color of the overall expansion,

* 1. Misalignment of the separator in the header with the separation of body.

* 2. Draw lines of separation of 2 pixels with the first in color light gray and others in dark grey.

**/

override protected function updateDisplayList(unscaledWidth:Number,_unscaledHeight:Number):void {}

The line width value 1 pixel to draw lines 1 pixel wide divider.

graphics.lineStyle (1, 0 x 000000);

Go from x = 0 to x = 1 to solve the problem of misalignment.

graphics.moveTo (1, 0);

Draw the line of separation of (1,0) (1, unscaledHeight).

graphics.lineTo (1, unscaledHeight);

}

]]>

And then simply set the property 'headerSeparatorSkin' of mx:DataGrid to this skin, for example inline definition property as below,

hand. MXML

Tags: Creative Suites

Similar Questions

Alignment of the column / paging in interactive reports
Hello

All questions are answered for reports, but I have an INTERACTIVE REPORT and could not understand how to solve these problems for the formatting of column section in there not for interactive reports.

1. the alignment of the column does not work. Is there a work around for this?
2. I have very long column names. How can I wrap the column names?
3. is there a way for paging through the last/first pages of the interactive report?

Any help is appreciated.

Thank you
Booth.
Hello

I have this interactive report region Footer
I hid point P1_MAX_ROWS where I intend to Max. of State prior to the calculation of Header lines.

BR, Jari

alignment of the column in a table
Hello

How to change the alignment of the column in Fe of the text fields in a table.

Manual option doesn.t work (no not the alingment position). I tried to add
```
style=text-align:right ( i cut quote)
```
in the column of the element options formatting, but I have not found a solution.

Someone knows how to change that?

Maybe sth simillar to the same problem in IR:
```
.apexir_WORKSHEET_DATA td, .apexir_WORKSHEET_DATA td div{text-align:right}
```
I understand ".apexir_WORKSHEET_DATA" it is only the definition of IR and it does not work with tabular

Edited by: nirud 2010-03-12 07:53
Hello

Will change your tabular presentation of the attributes of the column where you want to apply this style.
Then add to the attributes of the element
```
style=text-align:right
```
BR, Jari

Published by: jarola on March 14, 2010 11:22

Forum don't like my code
Wrap text-align: right to double quotes

Alignment of the column in the column attribute under attributes report does not
After you change the default setting and using the new parameter to change the alignment of the column from left to right, the numbers in the column are left when I run the page. I deleted the cache and the setting remains on 'right' even after record completely out of the browser and going back in the. The numbers in the column of the report are aligned on the left despite the setting of alignment for the column start "right". I have this problem with several columns and on any other page of the application. What Miss me?
Hello

Is the parameter display as defined in the "Standard report column? Is it just a standard report or a tabular form and the numbers at the points of ENTRY?

Andy

I have a problem with the alignment of the column, or so it seems... Help?

So I'm not going with the series "Create your first website" through adobe DW and everything went smoothly until I have add code to align the 3 columns. Reference to what I am referring here the link to the page: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt2.html#articlecontentAdob e_numberedheader_5 I'm on the last stage 'position the columns' and everything seems as it should until I enter the code float: left; and once I have it and press F5 my right column does not fit on one line, like the other two and has the word "here" in the line below... I checked my codes many, many times. I do not understand why a column is to the top... Please help

Hi Jeff,

Design view is not 100% reliable. Using Live View or preview in the browser to check your layout behaves.

If not, copy & paste the full HTML CSS integration & code of your test page into a forum post using web > (insert) syntax highlighting > ordinary.
```
code looks like this...
```
Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

Problem of masking and the columns in a datagrid
Hello

I noticed that the order in which the values are displayed gets reversed when I hide or show the column in the datagrid control. The robot to hide is triggered when the in button header that is rendered using headerRenderer.The see the feature is triggered when the value in the drop-down list with the name of the appropriate column is selected. If there is no solution to this help me. I tried various possilibilities, but none worked. I develop applications on Flex Builder 3.

Thank you and best regards,
Amar.
Hello

I thought that this issue was raised in reason to use itemRenderer for individual DatagridColumns. This has been fixed as soon as I use itemRenderer for the entire Datagrid rather than the individual columns.
Thank you
Amar

Sort the columns dynamically built DataGrid...
Hi people...
usually, I'm building my DataGrid dynamically... with something like this:

... omissis...
SQLstatement.text = "SELECT name, address FROM myDBTable";
SQLstatement.execute ();
resultSQL = SQLstatement.getResult ();
MyArrayCollection.source = resultSQL.data;
myDataGrid.dataProvider = MyArrayCollection;
... omissis...

and it works perfectly... the problem is that resultSQL.data, by default, is a table sorted by "abc" (ehmmm... in English is alphabetical sorting?).
Could, I want the same sort of my query, where the NAME came before the ADDRESS...

Is there a solution?
I don't want to pre-build a datagrid with all columns... because it cancels my dynamic datagrid features...

Thanks for all help...
bye bye ^ _ ^.

Thanks for your advice ntsiii :))

but now I use a SQLite database... so I prefer using Flex function...
but I tried a solution (Pentecost of google of course help)

the idea is the following:
Once completed this datagrid, I copy dg.colums to a temporaney tempArray...
can I swap the columns that are not in the right place... and in the end, I put dg.columns = tempArray...

I tried this method time ago... but it did not work because I tried to change directly from db.columns [x]...

Now, I'm convinced!

Bye bye

How to create the current header primary and secondary based on the title of each chapter?

Hello
I want that every page has a primary header running IE title of the book, while each subsequent page after that, also has a header running, but based on the title of a chapter.
Book title                                                                 | 1
First chapter title. 2
Book title                                                                 | 3
Second chapter title | 4
Book title                                                                 | 5
Third chapter title | 6
Book title                                                                 | 7
Fourth chapter title | 8
.. and so on...

Would be very happy for any help.
Like, rachida

Text variables - YouTube

Strange behavior with align on the pixel grid, pixelated and zoom overview

I have some frustrating behavior during the attempt to create, adjust and align objects not according to WARNING: no pixels in artificial intelligence.
* Line up on the grid of pixels with preview raster on, does not appear to align objects whole pixels. It does not with the option for new active objects, or verifying the individual objects in the processing window.
* Zoom / out causes pixel location/color change randomly. Maybe I don't understand exactly how these features work in artificial intelligence, but once I have enough to see the zoom pixels, I do not expect to change when the zoom and more.
* Travel/objects setting creates artifacts on my work plans. Zoom / out out them, but causes the weird behavior described above.
Advice? Advice? I'm doing something wrong? See you soon!

Riley,

I think this is one for a bug report, or should we say a feature request (deletion)?

Adobe - feature request/Bug Report Form

The Horizontal alignment of the table using DW4 and css help.

It works in Internet Explorer, but not FireFox.
The Web site is http://www.airrepaircarolina.com/
The CSS code is below...
* {margin: 0;} Padding: 0 ;}
. {BoldBody}
do-family: "Times New Roman", Times, serif;
do-size: 18px;
make-weight: bold;
Color: #000;
}
{#table1}
background-color: #FFF;
letter-spacing: normal;
text-align: left;
vertical-align: top;
horizontal-align: center;
Word-spacing: normal;
white-space: normal;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
top: auto;
position: fixed;
}
. {To header
do-family: "Times New Roman", Times, serif;
font size: 24 PX.
make-weight: bold;
color: #0E76BD;
}
. {BodyCopy}
do-family: "Times New Roman", Times, serif;
do-size: 18px;
make-weight: normal;
Color: #000;
}
. LinkText}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-weight: normal;
color: #FFF;
}

LannBarr wrote:

What should I put in where you have the double asterisk * with width, it is centered *

Nothing. It's just an explanatory note (or comment) in the CSS syntax.

/ * This is a CSS comment * /.

Alignment of the column on a page break

With the help of these forums, I am very close to having a perfect shape. It flows, it adds and removes subforms. There are two text fields that can grow inside the subform. Unfortunately, if the text field on the right is longer that the one on the left and crosses a page break, the information moves above the left side of the page. How can I keep it on the right?

what text you enter the subform correctly, breaks may be your missing something somewhere. You can even check the attached form.

Dynamic alignment of the value of element column and report page
Hi friends,

I have an interactive report that contains the columns as

< li > empno
< li > name

In the light of the foregoing, I 'empno' with an alignment of the left column and a 'name' with an alignment of the left column.

It is possible to substitute the alignment of the data that we put into the report according to the value of the application as element

If my application point is about US, so I need the alignment of the column 'empno' and 'Name' to the left, and if the value of point of my app's AR, I need the alignment of the column 'empno' and 'Name' to be right. What is possible to achieve dynamic alignment for the report data to two columns 'empno' and 'Name', according to the value of application page element.

And also, in the case of the page element, I have a page element with a name of P1_NAME in which he has an alignment of the Horizontal/Vertical element on the left.

I need to this alignment of the element of the page element behave dynamically according to the order of the day of the application page, as if the order of the day of the application page called WE then the alignment of the element of the page item must be left and if the order of the day of the application page called AR and then the alignment of the element of the page element has to be right.

Is it possible to make some friends of my scenario two above. Kindly help me with this.

Thanks in advance.

Brgds,
Mini
Hey Mini,

To change the alignment on the fly, you need a change in your IR and javascript.

First change the columns that you want to change the alignment for. Add the following code in The HTML Expression in the column formatting part. (Detail of the column)
```
#HERE _THE_COLUMN_NAME#
```
Then you can change the easy alignment for these areas with the following code
```
$(".align_style").css("text-align","left")
```
This can be in a DA, or just on the loading of the page.

Kind regards
Kees Vlek
-----
Company: http://www.orcado.nl
Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
Twitter: http://www.twitter.com/skier66
If the answer to question please change replied and mark the appropriate post as correct / helpful.

Published by: kvlek on 7-mei-2013 14:47

Customizations do not work for the alignment of the Table

Dear all, aJohny
We have improved r 12.1.3 to 12.2.4 under customization already existed in 12.1.3 we did import customization to 12.2.4
Picture below shows 4 tables
-Modified objectives
-New objectives
-Objectives deleted
-Objectives

I'm trying to align all the columns by column weighting of the target (%) as a 20% width and the width of column story that 5% to the Level of the Site
But as stated below its does not work
We tried to remove the customization and recreate it, but same problem exists.
Please notify.

Thank you and best regards,
Sudhir

Thanks AJ!

As recommended, we have treated this alignment issue table in CO related extension using the code below.

' public void processRequest (OAPageContext oapagecontext, OAWebBean oawebbean)

{

super.processRequest (oapagecontext, oawebbean);

//*************************

Table 1 OAAdvancedTableBean = (OAAdvancedTableBean) oawebbean.findChildRecursive ("NewObjectivesRN");

Table1.prepareForRendering (oapagecontext);

OAColumnBean columnBean1 = (OAColumnBean) table1.findChildRecursive ("XXNewObjectivesWeightingPercentCol");

DictionaryData columnFormat1 = (DictionaryData) columnBean1.getColumnFormat ();

If (columnFormat1 is nothing)

{

columnFormat1 = new DictionaryData();

}

columnFormat1.put (WIDTH_KEY, "45%");

columnBean1.setColumnFormat (columnFormat1);

//------------------------

OAColumnBean columnBean2 = (OAColumnBean) table1.findChildRecursive ("xxNewHistoryColumn");

DictionaryData columnFormat2 = (DictionaryData) columnBean2.getColumnFormat ();

If (columnFormat2 is nothing)

{

columnFormat2 = new DictionaryData();

}

columnFormat2.put (WIDTH_KEY, '20% ');

columnBean2.setColumnFormat (columnFormat2);

//*************************

Table2 OAAdvancedTableBean = (OAAdvancedTableBean) oawebbean.findChildRecursive ("ChgObjectivesRN");

table2.prepareForRendering (oapagecontext);

OAColumnBean columnBean4 = (OAColumnBean) table2.findChildRecursive ("ChangedObjectivesWeightingPercentCol");

DictionaryData columnFormat4 = (DictionaryData) columnBean4.getColumnFormat ();

If (columnFormat4 is nothing)

{

columnFormat4 = new DictionaryData();

}

columnFormat4.put (WIDTH_KEY, "45%");

columnBean4.setColumnFormat (columnFormat4);

//------------------------

OAColumnBean columnBean3 = (OAColumnBean) table2.findChildRecursive ("xxChgHistoryColumn");

DictionaryData columnFormat3 = (DictionaryData) columnBean3.getColumnFormat ();

If (columnFormat3 is nothing)

{

columnFormat3 = new DictionaryData();

}

columnFormat3.put (WIDTH_KEY, '20% ');

columnBean3.setColumnFormat (columnFormat3);

//*************************

Table 3 OAAdvancedTableBean = (OAAdvancedTableBean) oawebbean.findChildRecursive ("DelObjectivesRN");

table3.prepareForRendering (oapagecontext);

OAColumnBean columnBean5 = (OAColumnBean) table3.findChildRecursive ("XXQFDeletedObjectivesWeightingPercentCol");

DictionaryData columnFormat5 = (DictionaryData) columnBean5.getColumnFormat ();

If (columnFormat5 is nothing)

{

columnFormat5 = new DictionaryData();

}

columnFormat5.put (WIDTH_KEY, "45%");

columnBean5.setColumnFormat (columnFormat5);

//------------------------

OAColumnBean columnBean6 = (OAColumnBean) table3.findChildRecursive ("xxDelHistoryColumn");

DictionaryData columnFormat6 = (DictionaryData) columnBean6.getColumnFormat ();

If (columnFormat6 is nothing)

{

columnFormat6 = new DictionaryData();

}

columnFormat6.put (WIDTH_KEY, '20% ');

columnBean6.setColumnFormat (columnFormat6);

//*************************

Table 4 OAAdvancedTableBean = (OAAdvancedTableBean) oawebbean.findChildRecursive ("ApprObjectivesRN");

table4.prepareForRendering (oapagecontext);

OAColumnBean columnBean7 = (OAColumnBean) table4.findChildRecursive ("XXQFApprovedObjectivesWeightingPercentCol");

DictionaryData columnFormat7 = (DictionaryData) columnBean7.getColumnFormat ();

If (columnFormat7 is nothing)

{

columnFormat7 = new DictionaryData();

}

columnFormat7.put (WIDTH_KEY, "45%");

columnBean7.setColumnFormat (columnFormat7);

//------------------------

OAColumnBean columnBean8 = (OAColumnBean) table4.findChildRecursive ("xxApprHistoryColumn");

DictionaryData columnFormat8 = (DictionaryData) columnBean2.getColumnFormat ();

If (columnFormat8 is nothing)

{

columnFormat8 = new DictionaryData();

}

columnFormat8.put (WIDTH_KEY, '20% ');

columnBean8.setColumnFormat (columnFormat8);

//*************************

}

Thank you best regards &,.

Sudhir

How to set the alignment of the right button on the toolbar

Hello
I place a text button and exit on the toolbar
I want to set the alignment of the button (Logout) right and output text (welcome weblogic) remain the same as it original position (Left). I have this rhythm on the toolbar of the control panel.
How can do this?

Hello

Use this option instead of the toolbar.

Layout = "vertical" >

inlineStyle = "float: right;" / >

All in body text of scrolling through the fixed header

I was studying the model of Nancy O
http://ALT-Web.com/templates/FixedLayout.shtml
and I wanted to incorate ideas of it in my new design. I specifically wanted the fixed header, footer and background. But unfortunately my attempt
http://www.shyamasundaradasa.com/jyotish/temp/Untitled-1-delete.html
fails, because when I scroll to the top in runs through the header instead of below. What I am doing wrong? I have not tried the foot again until I have set the header.
Branko VL

Add ' z-index: 999 ' rule for the fixed header. The default z-index is 1. When the two positioned elements have a default z-index, the last record will be on top.

Bad alignment of the column header separator and separator columns in mx:DataGrid.

Similar Questions

Maybe you are looking for