Remove padding of material design

Anvil Q&A
1

What I’m trying to do:
I’m making a webapp with Material Design template, but there seems to be a padding default in the design that makes it impossible for the content of the webpage to span across the width of the

Screenshot (44)
Screenshot (44)1920×817 186 KB
whole page, like in the picture.

What I’ve tried and what’s not working:
I’ve uncommented all the padding statement in Assets’ theme.css and there were still some space left. After uncomment the padding in .designer .instructions element, the empty space shrank a bit but there is still a lot left.

2

Hello,

Please see this post.

1 Like
3

thank you for your quick reply!

4

Thanks for your reply, this works with width! Do you know how to remove the padding on top of the picture and below the header as well?

5

You can adjust some padding in the GUI under layout, otherwise it would be a CSS issue to solve, which I am no good at. If you share a clone, that will make it easier for folks to help with that aspect of the problem.

Also, note that you can actually create custom roles in Anvil which will allow you to apply custom CSS to a particular component too. If you search for “Anvil roles” you will find helpful examples.

6

This is my app:
https://anvil.works/build#clone:EK4UA3XZ5CREINNB=ATCQSJNEUSNX7VLZXAP3ZDJY

Additionally, while setting full_row_width successfully span the picture in the starter page, when I clicked on the home page, which is where the form is originally created, the picture is still limited to the center section of the page. Setting full_row_width there doesn’t change this.

Home code:

class Home(HomeTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
  def button_2_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.content_panel.clear()
    self.content_panel.add_component(Make())

Starter page code:

class Homepage(HomepageTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    # Any code you write here will run when the form opens.

  def link_1_click(self, **event_args):
    """This method is called when the link is clicked"""
    self.content_panel.clear()
    self.content_panel.add_component(Home())
7

when you dynamically add content and want a full width row:

  def link_1_click(self, **event_args):
    """This method is called when the link is clicked"""
    self.content_panel.clear()
    self.content_panel.add_component(Home(), full_width_row=True)

Anvil Docs | Containers

1 Like