How do I set percentage based widths?

[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

dpg.create_context()
dpg.create_viewport()
dpg.setup_dearpygui()

class LayoutHelper:

    def __init__(self):
        self.table_id = dpg.add_table(header_row=False, policy=dpg.mvTable_SizingStretchProp)
        self.stage_id = dpg.add_stage()
        dpg.push_container_stack(self.stage_id)
        
    def add_widget(self, uuid, percentage):
        dpg.add_table_column(init_width_or_weight=percentage/100.0, parent=self.table_id)
        dpg.set_item_width(uuid, -1)

    def submit(self):
        dpg.pop_container_stack() # pop stage
        with dpg.table_row(parent=self.table_id):
            dpg.unstage(self.stage_id)
        
with dpg.window(label="Tutorial", width=500):

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

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

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

# main loop
dpg.show_viewport()
while dpg.is_dearpygui_running():
    dpg.render_dearpygui_frame()  

dpg.destroy_context()

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)
        self.stage_id = dpg.add_stage()
        dpg.push_container_stack(self.stage_id)
        
    def add_widget(self, uuid, percentage):
        dpg.add_table_column(init_width_or_weight=percentage/100.0, parent=self.table_id)
        dpg.set_item_width(uuid, -1)

    def submit(self):
        dpg.pop_container_stack() # pop stage
        with dpg.table_row(parent=self.table_id):
            dpg.unstage(self.stage_id)