[Question] label text_align

[3mora2]

Question

how change text_align of TextField label to right
value can changed by text_align=ft.TextAlign.RIGHT

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[burhansvural]

`

from flet import *

def main(page: Page):

page.window_width=500
page.window_height=990

page.window_top=30
page.window_left=1400

page.title="Textfield Value Alignment Example- version : 1.0.1"

page.horizontal_alignment = CrossAxisAlignment.CENTER
page.auto_scroll = True
page.scroll = ScrollMode.HIDDEN
page.appbar = AppBar(
    title=Text(
        "TextField Demo App", weight=FontWeight.W_600, color=colors.BLACK87
    ),
    bgcolor=colors.BLUE,
    center_title=True,
    actions=[
        IconButton(icons.MENU, tooltip="Menu", icon_color=colors.BLACK87)
    ],
    color=colors.WHITE,
)    
txt_example=TextField(
        value="Text Field Value",
        label_style=TextStyle(
            weight=FontWeight.BOLD,
            ),
        text_align=TextAlign.LEFT,
        color=colors.BLACK87
    )

def fab_pressed(e):
    if txt_example.text_align==TextAlign.LEFT:
        txt_example.text_align=TextAlign.CENTER
        page.update()
    elif txt_example.text_align==TextAlign.CENTER:
        txt_example.text_align=TextAlign.RIGHT
        page.update()
    elif txt_example.text_align==TextAlign.RIGHT:
        txt_example.text_align=TextAlign.START
        page.update()
    elif txt_example.text_align==TextAlign.START:
        txt_example.text_align=TextAlign.END
        page.update()
    elif txt_example.text_align==TextAlign.END:
        txt_example.text_align=TextAlign.LEFT
        page.update()

    page.show_snack_bar(
        SnackBar(Text(f"Textfield value align changed. Align={txt_example.text_align}"), open=True),
    )
    

page.floating_action_button = FloatingActionButton(
    icon=icons.CHANGE_CIRCLE,on_click=fab_pressed,
    bgcolor=colors.LIME_300,
    text="Change TextField Value Align"
)

page.add(txt_example)
page.update()

app(target=main)

`

[burhansvural]

It is necessary to add more advanced properties for the TextField's label property, but these have not been added yet.

[3mora2]

ok

[ndonkoHenri]

Can page.rtl be of help?

[3mora2]

yes, it good for me
but it change direction of all element, in app there Arabic input and English
should only change Arabic input to right

[FeodorFitsner]

Created new issue: #2462

[burhansvural]

I have shown how this can be done with an easy technique in the application below. It's up to you to develop further.

`
from enum import Enum
from flet import *
import flet.canvas as fcvs

class LabelAlign(Enum):
NONE = None
START = "start"
CENTER = "center"
END = "end"

class CustomTextField(fcvs.Canvas):
__pos = LabelAlign.NONE

def __init__(self, lblAlign: LabelAlign, lblStr: str, lblColor: str):
    super().__init__()
    self.__txt_width_widget = TextField(focused_border_width=1, focused_border_color=lblColor,
                                        border_color=lblColor)
    if lblAlign == LabelAlign.END:
        self.__pos = alignment.top_right
    elif lblAlign == LabelAlign.CENTER:
        self.__pos = alignment.top_center
    else:
        self.__pos = alignment.top_left
    self.__lblColor = lblColor
    self.__lblStr = "  " + lblStr + "  —"

    self.content = Stack(
        controls=[
            Container(
                content=self.__txt_width_widget,
            ),
            Container(
                content=Text(
                    overflow=TextOverflow.ELLIPSIS,
                    color=self.__lblColor,
                    value=self.__lblStr,
                    size=12,
                    bgcolor=colors.WHITE,
                ),
                alignment=self.__pos,
                margin=margin.only(left=16, top=-9.88, right=6),
            )
        ],
    )

def main(pagex: Page):
pagex.title = "Custom Text Field With Label Alignment"

pagex.add(CustomTextField(lblAlign=LabelAlign.START, lblStr="Example Label 1", lblColor=colors.RED))
pagex.add(CustomTextField(lblAlign=LabelAlign.CENTER, lblStr="Example Label 2", lblColor=colors.GREEN))
pagex.add(CustomTextField(lblAlign=LabelAlign.END, lblStr="Example Label 3", lblColor=colors.ORANGE))
pagex.update()

app(target=main)

`