Add a max height to `gr.Row`

[elismasilva]

• [yes ] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] I am creating dynamic app where components are rendered at runtime, so i am doing something this image:

where i am plotting cards for each file in folder.

Describe the solution you'd like
A clear and concise description of what you want to happen. I want paginate or do scrolling down on cards because i dont want these many cards take all page area. I want to add other components below this tab session and I don't want to have to roll the whole pagin to get to these components, so it would be good that I could limit the view to a fixed size within this Tab and that the components rendered inside it are paid or rolled vertically.

Additional context
Add any other context or screenshots about the feature request here. this is my tab code

with gr.TabItem("Lora's", id=1):                                        
      with gr.Row():
          with gr.Column(scale=3, elem_id="lora_tab"):
              lora_count = gr.State(len(LORA_FILES))
              use_this_loras=[]
              loras = []
              loras_scales = []                                                
              @gr.render(inputs=lora_count)
              def render_tracks(count):                                                    
                  with gr.Row():
                      for i in range(len(LORA_FILES)):
                          with gr.Column(variant="panel", min_width=300):
                              use_this_lora = gr.Checkbox(label="Apply Lora", value=False)
                              lora = gr.Textbox(label="Lora Name", value=f"{LORA_FILES[i]}", key=f"{LORA_FILES[i]}", show_label=True)                                                                
                              lora_scale = gr.Slider(
                                  interactive=False,
                                  minimum=0.1,
                                  maximum=20.0,
                                  step=0.1,
                                  value=0.1,
                                  label="Lora Scale", key=f"scale-{i}")
                              use_this_loras.append(use_this_lora)

                              def change_this_lora(use_this_lora):
                                  if use_this_lora:
                                      return gr.update(interactive=True)
                                  else:
                                      return gr.update(interactive=False)
                              use_this_lora.select(fn=change_this_lora, inputs=use_this_lora, outputs=[lora_scale])

                              loras.append(lora)
                              loras_scales.append(lora_scale)

I with something like this image (my drawing):

[abidlabs]

Thanks @elismasilva -- if we added a max height for gr.Row, it would solve the issue, right?

[elismasilva]

Thanks @elismasilva -- if we added a max height for gr.Row, it would solve the issue, right?

If it uses the CSS from behind it could not work, I do this test by adding an ID to line and adding this max_heigth to my CSS and this happens: the row overlaps the back component (tab item), the rows component have no scrollbars?

[elismasilva]

now i notice related issue opened here #9192, my case is an example of this requested feature, But it is necessary to evaluate whether it is necessary to add the scroll bar to all components or just in the row and column component. Because they will always be within these other components in the last level. So it would also be interesting to have a horizontal scroll bar beyond the vertical.

[elismasilva]

@abidlabs is ok about clarification? i have opened new bug #9207 today about other thing, but that contains a full example of code of this functionality. The initial idea I had was to load all the localized files automatically as cards and then enable or disable each card from the checkbox, but since I don't have the scrolldown in the row I needed to change to manually adding the cards, in order to not pollute the screen with too many records. For now this is what I can do about it.

[elismasilva]

@abidlabs just for update, for while i did overflow: auto; max-height: 380px; in my css to solve!

[abidlabs]

Closed via: https://github.com/gradio-app/gradio/pull/9313