How to override the size of the fields in the template

[jorge-ramirezs]

Hello,
I'm creating a new template, the issue is once I display the "location" form in the template, the field for the address is too small.

How can I modify the size for the fields?

in template I'm just passing this

<h5>Dirección</h5>
    {{ form.location }}
    {{ form.media }}
</div>

Thanks!

[oscarmcm]

Hey! Are you rendering the `form.media` in the template? The other option is to override the css directly in your app styles or in the template: ```css .places-widget > input:first-child { display: block; width: 30%; margin-bottom: 10px; } ``` Lmk if that solve it.

[oscarmcm]

Hey @jorge-ramirezs did you set the width to be 100%?

[jorge-ramirezs]

Thank you for your prompt response. As you can imagine I'm not a front developer 🤕

To your question, yes I did. I took your css from ".venv/lib/python3.11/site-packages/places/static/places/places.css" and copied it to my "static/css/style.css", and modified that line only to make it as this:

.places-widget {
  overflow: hidden;
}
.places-widget > input:first-child {
display: block;
width: 100%;
margin-bottom: 10px;
}
.places-widget > input:nth-child(2) {
margin-right: 10px;
}
.places-widget > div {
border: 1px solid #CACACA;
margin-top: 10px;
}

In my browser I can see that "places.css" takes precedence on top of "style.css" and overwrites my changes:

For testing purposes, if I disable the line "width: 30%" in the "inspect" window, the field expands to 100%.

---

By the way, the other test I did was to update the file "places.css" and modify the width to 100% and it worked of course, but I understand this is not the best way, there must be a way to override this value.

Thank you.

[oscarmcm]

@jorge-ramirezs Yeah your issue is more related to specificity probably adding an !important to the styles in your template will fix it.

[jorge-ramirezs]

That makes the trick. Thank you.

[jorge-ramirezs]

Adding "!Important" in my style.css solves the issue, now the field is expanded at 100%

.places-widget > input:first-child {
display: block;
width: 100% !important;
margin-bottom: 10px;
}

Thank you again!