How do I set percentage based widths? (0.8)

[hoffstadt]

Answer

Percentage based widths are not directly supported yet in Dear PyGui, however there are various techniques you could use to achieve it. For example, you could create a thin wrapper around the table API using the proportional stretch sizing policy.

Example

import dearpygui.dearpygui as dpg

class LayoutHelper:

    def __init__(self):

        self.table_id = dpg.add_table(header_row=False, policy=dpg.mvTable_SizingStretchProp)
        dpg.push_container_stack(self.table_id)

    def add_widget(self, uuid, percentage):
        dpg.add_table_column(init_width_or_weight=percentage/100.0, parent=self.table_id)
        dpg.add_table_next_column(parent=self.table_id)
        dpg.set_item_width(uuid, -1)

    def submit(self):
        dpg.pop_container_stack()


with dpg.window(label="Tutorial", width=500):

    line1 = LayoutHelper()
    line1.add_widget(dpg.add_button(label="25%"), 25.0)
    line1.add_widget(dpg.add_button(label="75%"), 75.0)
    line1.submit()

    line2 = LayoutHelper()
    line2.add_widget(dpg.add_button(label="50%"), 50.0)
    line2.add_widget(dpg.add_button(label="50%"), 50.0)
    line2.submit()

    line3 = LayoutHelper()
    line3.add_widget(dpg.add_button(label="25%"), 25.0)
    line3.add_widget(dpg.add_button(label="25%"), 25.0)
    line3.add_widget(dpg.add_button(label="50%"), 50.0)
    line3.submit()


dpg.start_dearpygui()

Resources

• Table API
• Container Stack

Reusable Code

class LayoutHelper:

    def __init__(self):

        self.table_id = dpg.add_table(header_row=False, policy=dpg.mvTable_SizingStretchProp)
        dpg.push_container_stack(self.table_id)

    def add_widget(self, uuid, percentage):
        dpg.add_table_column(init_width_or_weight=percentage/100.0, parent=self.table_id)
        dpg.add_table_next_column(parent=self.table_id)
        dpg.set_item_width(uuid, -1)

    def submit(self):
        dpg.pop_container_stack()