Not able to resize scrolled frame about pygubu

[tangentThought]

This is perfect! Thank you, for taking the time in putting together these examples that is very easy to understand for me.

[glycoaddict]

Solution worked for me too - the critical step seemed to be making the parent of the scrolledframe and the scrolled frame itself have row and column weights of > 0 (i.e. 1). Otherwise when set to 0, the size defaults to some value.

[alejandroautalan]

Hello rameshgandhim,

Maybe you need to check the "sticky" property of all the widgets related. If you want that the internal widgets be streched with the entire window, the sticky property should be set to "nsew".
Do not forget to configure the row/column weight for each container widget in the "grid row/column options" in the layout section.

Note that this lead me to find a bug. Look at this issue #51

If this is not what you want, show me the UI file and tell me the expected results.

Test this working example:

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="tk.Toplevel" id="Toplevel_1">
    <property name="height">200</property>
    <property name="resizable">both</property>
    <property name="width">200</property>
    <child>
      <object class="ttk.Frame" id="Frame_4">
        <property name="height">200</property>
        <property name="width">200</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">True</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
          <rows>
            <row id="0">
              <property name="weight">1</property>
            </row>
          </rows>
          <columns>
            <column id="0">
              <property name="weight">1</property>
            </column>
          </columns>
        </layout>
        <child>
          <object class="ttk.Labelframe" id="Labelframe_3">
            <property name="height">200</property>
            <property name="text" translatable="yes">Labelframe_3</property>
            <property name="width">200</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
              <rows>
                <row id="0">
                  <property name="weight">1</property>
                </row>
              </rows>
              <columns>
                <column id="0">
                  <property name="weight">1</property>
                </column>
              </columns>
            </layout>
            <child>
              <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe_1">
                <property name="scrolltype">both</property>
                <layout>
                  <property name="column">0</property>
                  <property name="propagate">True</property>
                  <property name="row">0</property>
                  <property name="sticky">nsew</property>
                  <rows>
                    <row id="0">
                      <property name="weight">1</property>
                    </row>
                  </rows>
                  <columns>
                    <column id="0">
                      <property name="weight">1</property>
                    </column>
                  </columns>
                </layout>
                <child>
                  <object class="pygubu.builder.widgets.scrollbarhelper" id="scrollbarhelper_1">
                    <property name="scrolltype">horizontal</property>
                    <layout>
                      <property name="column">0</property>
                      <property name="propagate">True</property>
                      <property name="row">0</property>
                      <property name="sticky">nsew</property>
                    </layout>
                    <child>
                      <object class="tk.Text" id="Text_1">
                        <property name="background">#ffffff</property>
                        <property name="height">10</property>
                        <property name="text" translatable="yes">A long line of text 
Line
Line
Line
Line
Line
Line
Line
Line
Line
Line
Line
Line word word word word word word word word word word word word word word word word word word word </property>
                        <property name="width">50</property>
                        <layout>
                          <property name="column">0</property>
                          <property name="propagate">True</property>
                          <property name="row">0</property>
                          <property name="sticky">nsew</property>
                        </layout>
                      </object>
                    </child>
                  </object>
                </child>
                <child>
                  <object class="pygubu.builder.widgets.scrollbarhelper" id="scrollbarhelper_2">
                    <property name="scrolltype">horizontal</property>
                    <layout>
                      <property name="column">0</property>
                      <property name="propagate">True</property>
                      <property name="row">1</property>
                      <property name="sticky">nsew</property>
                    </layout>
                    <child>
                      <object class="tk.Text" id="Text_2">
                        <property name="background">#fff4ff</property>
                        <property name="height">10</property>
                        <property name="text" translatable="yes">A long line of text 2
Line
Line
Line
Line
Line
Line
Line
Line
Line
Line
Line
LineText_2</property>
                        <property name="width">50</property>
                        <layout>
                          <property name="column">0</property>
                          <property name="propagate">True</property>
                          <property name="row">0</property>
                          <property name="sticky">nsew</property>
                        </layout>
                      </object>
                    </child>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

Regards
Alejandro A.

[rameshgandhim]

I would like to change size of Scrolled Frame.

Test example :

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="ttk.Frame" id="Frame_1">
    <property name="height">500</property>
    <property name="width">500</property>
    <layout>
      <property name="column">0</property>
      <property name="propagate">True</property>
      <property name="row">0</property>
      <property name="sticky">nsew</property>
    </layout>
    <child>
      <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe_1">
        <property name="height">100</property>
        <property name="scrolltype">both</property>
        <property name="width">100</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">True</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
        </layout>
        <child>
          <object class="tk.Text" id="Text_1">
            <property name="height">50</property>
            <property name="text" translatable="yes">Very long long long long long long long long text</property>
            <property name="width">50</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

If i change size of text box, its getting expanded inside ScrolledFrame and if i change width/height of ScrolledFrame it stays same size.
Note size of Scrolled Frame is 100x100

[tangentThought]

Hi,

I'm having the exact issue here. No matter what I've tried the ScrolledFrame widget remains the same size. I cannot change the size of the square ScrolledFrame it creates (I want it to be taller or sized like a rectangle). Is there a way for me to do this?

[alejandroautalan]

Hello tangentThought, thanks for trying pygubu. Sorry for the late response.

I cannot change the size of the square ScrolledFrame it creates (I want it to be taller or sized like a rectangle). Is there a way for me to do this?

Yes, you can. You need to setup correctly the grid options of the parent and the scrolledFrame widget.
See the next example.

Frame_1 (sticky='nsew')
    ScrolledFrame_1 (sticky='nsew')
         Text_1

Here the scrolledFrame will have a fixed size and will not expand inside the frame_1. Why? If I already set the sticky option to expand. That's not enough. The scrolledFrame is in position (0,0) inside the frame_1, so you need to set row 0 and column 0 (of the frame) to be expandable using the grid row/column option weight.

Expand failing:

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="ttk.Frame" id="Frame_1">
    <property name="height">500</property>
    <property name="width">500</property>
    <layout>
      <property name="column">0</property>
      <property name="propagate">True</property>
      <property name="row">0</property>
      <property name="sticky">nsew</property>
    </layout>
    <child>
      <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe_1">
        <property name="height">100</property>
        <property name="scrolltype">both</property>
        <property name="width">100</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">True</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
        </layout>
        <child>
          <object class="tk.Text" id="Text_1">
            <property name="height">50</property>
            <property name="text" translatable="yes">Very long long long long long long long long text</property>
            <property name="width">50</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

SrolledFrame resizable:

Frame_1 (sticky='nsew') (columnconfigure(0, weight=1), rowconfigure(0, weight=1))
    ScrolledFrame_1 (sticky='nsew')
         Text_1

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="ttk.Frame" id="Frame_1">
    <property name="height">500</property>
    <property name="width">500</property>
    <layout>
      <property name="column">0</property>
      <property name="propagate">True</property>
      <property name="row">0</property>
      <property name="sticky">nsew</property>
      <rows>
        <row id="0">
          <property name="weight">1</property>
        </row>
      </rows>
      <columns>
        <column id="0">
          <property name="weight">1</property>
        </column>
      </columns>
    </layout>
    <child>
      <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe_1">
        <property name="height">100</property>
        <property name="scrolltype">both</property>
        <property name="width">100</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">True</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
        </layout>
        <child>
          <object class="tk.Text" id="Text_1">
            <property name="height">50</property>
            <property name="text" translatable="yes">Very long long long long long long long long text</property>
            <property name="width">50</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

I hope I have explained well. Let me know.
Regards,
Alejandro A.

[tangentThought]

Thank you for explaining this, Alejandro. I have copied your success code, and loaded it with pygubu after changing the width and height of the scrolledframe, but unfortunately, the end result still yielded a square in the GUI:

I honestly do not know what I am doing incorrectly.

[alejandroautalan]

Hi tangentThought.

I you want to apply a specific size to the scrolledFrame, try this approach. Add an additional frame and set a fixed size to that frame.

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="ttk.Frame" id="appframe">
    <property name="height">500</property>
    <property name="width">500</property>
    <layout>
      <property name="column">0</property>
      <property name="propagate">True</property>
      <property name="row">0</property>
      <property name="sticky">nsew</property>
      <columns>
        <column id="0">
          <property name="weight">1</property>
        </column>
      </columns>
      <rows>
        <row id="0">
          <property name="weight">1</property>
        </row>
      </rows>
    </layout>
    <child>
      <object class="ttk.Frame" id="framesizer">
        <property name="height">80</property>
        <property name="width">350</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">False</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
          <columns>
            <column id="0">
              <property name="weight">1</property>
            </column>
          </columns>
          <rows>
            <row id="0">
              <property name="weight">1</property>
            </row>
          </rows>
        </layout>
        <child>
          <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe_1">
            <property name="height">50</property>
            <property name="scrolltype">both</property>
            <property name="width">200</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
            <child>
              <object class="tk.Text" id="Text_1">
                <property name="height">50</property>
                <property name="text" translatable="yes">Very long long long long long long long long text</property>
                <property name="width">50</property>
                <layout>
                  <property name="column">0</property>
                  <property name="propagate">True</property>
                  <property name="row">0</property>
                  <property name="sticky">nsew</property>
                </layout>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

If you want to set a size to the entire application in design time use the Toplevel widget.

file issue50review2.ui:

<?xml version='1.0' encoding='utf-8'?>
<interface>
  <object class="tk.Toplevel" id="toplevel1">
    <property name="geometry">480x230</property>
    <property name="height">200</property>
    <property name="resizable">both</property>
    <property name="title" translatable="yes">My App</property>
    <property name="width">200</property>
    <child>
      <object class="ttk.Frame" id="mainframe">
        <property name="borderwidth">4</property>
        <property name="height">200</property>
        <property name="width">200</property>
        <layout>
          <property name="column">0</property>
          <property name="propagate">True</property>
          <property name="row">0</property>
          <property name="sticky">nsew</property>
          <columns>
            <column id="0">
              <property name="weight">1</property>
            </column>
          </columns>
          <rows>
            <row id="0">
              <property name="weight">1</property>
            </row>
          </rows>
        </layout>
        <child>
          <object class="pygubu.builder.widgets.scrolledframe" id="scrolledframe1">
            <property name="height">100</property>
            <property name="scrolltype">both</property>
            <property name="width">100</property>
            <layout>
              <property name="column">0</property>
              <property name="propagate">True</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
              <columns>
                <column id="0">
                  <property name="weight">1</property>
                </column>
              </columns>
              <rows>
                <row id="0">
                  <property name="weight">1</property>
                </row>
              </rows>
            </layout>
            <child>
              <object class="tk.Text" id="Text_1">
                <property name="height">50</property>
                <property name="text" translatable="yes">Very long long long long long long long long text</property>
                <property name="width">50</property>
                <layout>
                  <property name="column">0</property>
                  <property name="propagate">True</property>
                  <property name="row">0</property>
                  <property name="sticky">nsew</property>
                </layout>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

import os
import tkinter as tk
import pygubu
 
 
class Application:
    def __init__(self):
       self.builder = builder = pygubu.Builder()
       fpath = os.path.join(os.path.dirname(__file__),"issue50review2.ui")
       builder.add_from_file(fpath)
       
       self.mainwindow = builder.get_object('toplevel1')
        
    def run(self):
        self.mainwindow.mainloop()


if __name__ == '__main__':
    app = Application()
    app.run()

Regards,
Alejandro A.