How to temporarily change y position of xypanel

Anvil Q&A
1

What I’m trying to do:

I have conditional questions set-up where each radio button corresponds to another question and hides non-relevant columns. However, I do not know how to adjust the spacing of the data row panels after a question is conditionally chosen.

What I’ve tried and what’s not working:

Have tried several variations of code to hopefully have the second question’s position change to the first questions position but have had no luck. The system doesn’t argue with the code, but am not seeing the visible changes when ran.

Code Sample:

# this is a formatted code snippet.

from ._anvil_designer import EnvironmentalToolkitTemplate
from anvil import *
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
import anvil.server


class EnvironmentalToolkit(EnvironmentalToolkitTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.

  def form_environmental_show(self, **event_args): #links to startup form homepage
    """This method is called when the form is shown on the page"""
    self.layout.reset_links()
    self.layout.Environmental_Toolkit.role = 'selected'

  def PFAS_RB_clicked(self, **event_args): #Q1 radio button event
    """This method is called when this radio button is selected"""

    if self.PFAS_RB.selected is True: #PFAS radiobutton enabled
      self.Q2.visible = True #Q2 shown
      self.Q3.visible = False #Q3 hidden
      self.Q4.visible = False #Q4 hidden
      self.Q5.visible = False #Q5 hidden
   
  def PAH_RB_clicked(self, **event_args): #Q1 radio button event
    """This method is called when this radio button is selected"""

    if self.PAH_RB.selected is True: #PAH radiobutton enabled
      self.Q2.visible = False #Q2 hidden
      self.Q3.visible = True #Q3 shown
      self.Q4.visible = False  #Q4 hidden
      self.Q5.visible = False #Q5 hidden
      xyp = XYPanel( height=280) #Hopefully change position of question to match Q1
      self.Q3.add_component(xyp)

  def PCB_RB_clicked(self, **event_args): #Q1 radio button event
    """This method is called when this radio button is selected"""

    if self.PCB_RB.selected is True: #PCB radiobutton enabled
      self.Q2.visible = False #Q2 hidden
      self.Q3.visible = False #Q3 hidden
      self.Q4.visible = True #Q4 shown
      self.Q5.visible = False #Q5 hidden
      
  def TM_RB_clicked(self, **event_args): #Q1 radio button event
    """This method is called when this radio button is selected"""

    if self.TM_RB.selected is True: #TM radiobutton enabled
      self.Q2.visible = False #Q2 hidden
      self.Q3.visible = False #Q3 hidden
      self.Q4.visible = False  #Q4 hidden
      self.Q5.visible = True #Q5 hidden

# paste your code between ```

Clone link:
share a copy of your app

2

Didn’t see where you were adding coordinates to the xy panel in the clone, but I think you can only change the xy coordinates when you add components. So the way to change a component already added to the xy panel is to run . remove_from_parent on the component whose position you want to change and then use add_component on the xy panel again with the new xy coordinates as keyword arguments.

1 Like
3

What am I missing? The code removes the item, but is not replacing it at the new height. No errors are being given either.

this is a formatted code snippet.

if self.PAH_RB.selected is True: #PAH radiobutton enabled
  self.Q2.visible = False #Q2 hidden
  self.Q3.visible = True #Q3 shown
  self.Q4.visible = False  #Q4 hidden
  self.Q5.visible = False #Q5 hidden
  self.Q3.remove_from_parent()
  self.Q3.add_component(XYPanel(height=280))

paste your code between ```

4

This creates an anonymous XYPanel, but doesn’t attach it to the current form, so it won’t be displayed. And without a lasting reference to that object, Python will discard it.

I suspect you should be referring to your form’s existing XYPanel:
image

An XYPanel is probably not what you want here. With an XYPanel, your code takes full responsibility for placing everything in that XYPanel, i.e., everything that has the XYPanel as its direct parent. And as you’ve found out, once placed in that container, a component is not going to move automatically, even if its neighbors are [un]hidden.

Whereas, if your container is a LinearPanel or ColumnPanel, instead of an XYPanel, then Anvil takes responsibility for closing up the space, automatically, when one of its components is [un]hidden. This is a feature I use frequently in my GUIs.

https://py.space/g/TYYHKRLGXKAMW5YF

1 Like