B4J Question Tableview Column Header Alignment

nadhiras

Member
Licensed User
Longtime User
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) :
problem.png

i use external css to styling tableview
in here is my css
B4X:
.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 :
B4X:
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)
expected.png

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

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0

nadhiras

Member
Licensed User
Longtime User
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
B4X:
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
 
Upvote 0

nadhiras

Member
Licensed User
Longtime User
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 :
B4X:
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
B4X:
.my-special-column-style .label {
  -fx-alignment: center-right;
}
 
Upvote 0
Top