B4J Question Tableview Column Header Alignment

[nadhiras]

Hi everybody.. ive some problem about tableview column header alignment.
i want to set column header alignment to right but only one column not all columns.

here is the problem image ( image can represent 10000 words) :

Spoiler: IMAGE PROBLEM

i use external css to styling tableview
in here is my css

.table-view{
    -fx-base: #2A2A2A;
    -fx-control-inner-background: #2A2A2A;
    -fx-background-color:transparent;
    -fx-table-cell-border-color: transparent;
    -fx-padding: 1;
    -fx-selection-bar-non-focused: #008287 ;   
}

.table-view .column-header-background{
    -fx-background-color: #1d1d1d;
    -fx-border-color: transparent transparent rgba(255,255,255,0.3) transparent;
    -fx-border-width: 1;
    -fx-background-insets: 0;
}

.table-view .column-header, .table-view .filler {
    -fx-background-color: transparent;
    -fx-size: 25;
    -fx-border-width: 0 0 0 0;
    -fx-text-fill: #d8d8d8;
}
.table-view .column-header .label {
    -fx-font-size: 13px;
    -fx-font-weight:bold;
    -fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    -fx-text-fill: #d8d8d8;
    -fx-alignment: center-left;
    -fx-opacity: 1;
}

.table-cell {
    -fx-font-size: 14px;
    -fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    -fx-text-fill: #d8d8d8;
    -fx-alignment: center-left;
}

.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: #008287;
}

and this is my b4j code for generate data to tableview :

sub LoadData
TableView1.Items.Clear
Dim cols As List

cols.Initialize
cols.AddAll(Array As String("BANK","ACC. OWNER","ACC. NUMBER","ACTION"))
TableView1.SetColumns(cols)   
Dim curks As ResultSet
curks =Main.SQL1.ExecQuery("select * from bank")
Do While curks.NextRow
Dim lbl1,lbl2,lbl3 As Label
    Dim Btn As Button
    Dim btn2 As Button
   
    Dim paneBtn As Pane
    paneBtn.Initialize("")
    paneBtn.PrefHeight =28
    lbl1.Initialize("lbl1")
    lbl2.Initialize("lbl2")
    lbl3.Initialize("lbl3")
    Btn.Initialize("btndelsat")
    btn2.Initialize("btnEdsat")         
    Btn.StyleClasses.Add("btnDelTab")
    btn2.StyleClasses.Add("btnEdTab")   

    Btn.tag =  curks.GetString("namabank")
    btn2.tag =  curks.GetString("namabank")   
    paneBtn.AddNode(btn2,0,0,25,28)
    paneBtn.AddNode(Btn,45,0,25,28)
   
   
    lbl1.Text = curks.GetString("bankname").ToUpperCase
    lbl2.Text = curks.GetString("owner")
    lbl3.Text = curks.GetString("accnum")             
    TableView1.Items.Add(Array As Object(lbl1.Text, lbl2.Text,lbl3.Text,paneBtn)) 
   
Loop
curks.Close        
SetColumnStyle(TableView1,2,"-fx-alignment:CENTER-RIGHT")
End Sub

Sub SetColumnStyle(table As TableView, ColumnIndex As Int, Style As String)
   Dim jo As JavaObject = table
   jo.RunMethodJO("getColumns", Null).RunMethodJO("get", Array(ColumnIndex)).RunMethod("setStyle", Array(Style))
End Sub

what i want is like the image below (manually edit)

Spoiler: IMAGE

Sorry for my bad english....
Any one can help ????

 

[EnriqueGonzalez]

I am not infront of my computer so I cannot test it but this link may help you

https://www.b4x.com/android/forum/threads/tableview-header-wrap-text.62550/#content

 

[nadhiras]

I am not infront of my computer so I cannot test it but this link may help you

https://www.b4x.com/android/forum/threads/tableview-header-wrap-text.62550/#content

i think that snippet only for wrap text header. and the effect for all columns, not for just one columns

or maybe I'm wrong understanding that snippet ...

 

[EnriqueGonzalez]

Yes, the snippet is for that, but it is iterating thru every header label,

You just need to check which one is the one you want aligned. And with the CSS utils change it.

 

[nadhiras]

Yes, the snippet is for that, but it is iterating thru every header label,

You just need to check which one is the one you want aligned. And with the CSS utils change it.

i ve got this

Waiting for debugger to connect...
Program started.
Nov 02, 2016 2:23:11 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Caught java.lang.IllegalArgumentException: No enum constant javafx.scene.text.TextAlignment.center_right' while calculating value for '-fx-text-alignment' from inline style on Label@1aa88cb[styleClass=label]'BANK'
Nov 02, 2016 2:23:11 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Caught java.lang.IllegalArgumentException: No enum constant javafx.scene.text.TextAlignment.center_right' while calculating value for '-fx-text-alignment' from inline style on Label@160d58f[styleClass=label]''

and dont effect to the head columns

but when i set alignment to center no warning appear. only just set it to center_right

 

[nadhiras]

i found the solution from http://stackoverflow.com/questions/23576867/javafx-how-to-align-only-one-column-header-in-tableview

maybe this useful for other :

Sub SetAlignmentColumnStyle(table As TableView, ColumnIndex As Int, Style As String)
   Dim jo As JavaObject = table
   jo.RunMethodJO("getColumns", Null).RunMethodJO("get", Array(ColumnIndex)).RunMethodJO("getStyleClass", Null).RunMethod("add", Array(Style))
End Sub

and u should add css for that
like this

.my-special-column-style .label {
  -fx-alignment: center-right;
}

 

[Mashiane]

Wow, this is some eye candy tableview, nice css!