https://discord.umbraco.com logo
Join Discord
Powered by
[Solved] Umbraco Forms styles
# help-with-umbraco
c
V13.5.2 + UF13.4.0 How can we make text and textarea fields go full with when it appears the UF devs have set their max-widths with !Important? https://cdn.discordapp.com/attachments/1329808117999079445/1329808118426632314/Screenshot_from_2025-01-17_13-39-24.png?ex=678bafd2&is=678a5e52&hm=364d4191e7b2355ec9fd62c7987b69210728ce0645f5f7849e34efee84d04141&
a
Override it 🙂
take a parent like
Copy code
body .umbraco-forms-form input.text{
width:1000px !important;
}
the strongest selector is used
s
That's the quick & dirty way, the correct way is to make a custom theme: https://docs.umbraco.com/umbraco-forms/developer/themes
c
Thanks, but didn't work 😦
s
Just as a note, when upgrading Forms, it is possible that the default theme changes (although I don't think we've ever made any significant changes), so if you want to be absolutely sure that it will work, then a custom theme is the way to go.
a
You know what I like 😉
It should though! Do you see your result when you inspect the element?
For just a (simple) css change i'd say wrap it in a parent class and style from there.. If you really need to make layout changes, go with a custom theme
s
Ps. Remember browser cache..
c
I just find it annoying that something as basic as an input width is set in stone. I'm sure it didn't used to be, I've done this before loads of time (at least I think I have). Everything just gets more and more complicated and time consuming. lol
a
It isn't set in stone 🙂
What you'd recommend Craig, no css at all? you need to have a default theme with some limits on it so iit's easily useable
else it gets even harder to use
c
Well, not using !important would be a good start 🙂
Copy code
body .contact-details-form .umbraco-forms-form input.text,
body .contact-details-form .umbraco-forms-form textarea {
    width:1000px !important;
}
Doesn't work 😦
a
Do you see your inline in the inspector, mind the cache ofc 🙂
c
I don't see it referenced in the inspector. Have restarted app and purged all caches and done a hard refresh.
Sorted. Was changing one statement while looking at another! Thanks for the "quick & dirty" tip. That'll come in handy again sometime, I'm sure (sorry @Sebastiaan lol).
5 Views
PreviousNext
Powered by