Form status message
Hey,
What is the best practice to keep one's div size without allowing to interact with the content of it?
My idea is to keep the form's panel the same size as it is and display sending message with some spinner on it.
I was thinking about just reducing opacity of form to zero but then the inputs would be still available to users
and seems like a bit of a unclean hack. Any ideas for cleaner solution?
24 Replies
What is the best practice to keep one's div size without allowing to interact with the content of it?not having the div there at all? like,
display: none
what are you trying to do?
also that glow behind the text is very unaccessible for some peoplebut that would shrink the outside container. The size isn't fixed now, it is based on the inputs and button size.
it wouldnt shrink: it would remove everything
what exactly do you want to do?
one sec, I'll try to draw it so that will explain better.
in simple words first
alright
it's often much better to make a codepen that demonstrates your issue
So I'll try to explain again. Red marked div needs to stay the same size as it is now.
Upon hitting submit button I want to hide the form, make it inaccessible and show the Message and Spinner in its place without changing its size.
Marked container is dictated by the size of the form at the moment and I'd love to keep it that way.
yes, I know, but there isn't much of an issue here, just need some advice or recommendation for clean solution.
My code is behaving as expected for now. I just figured I might ask here first instead of wasting time to implement some
not so clean solution 🙂
that is a bad idea for 1 reason: people won't be able to see what was sent, and will send another message
and another because of some reason
and another because this one was missing something from before
and another, and another ....
just let people see what they are sending, even if it isnt interactive
HOWEVER, if you really really want to do this, just disable the inputs, set the visibility to hidden and show the spinner on top
either with grid or position absolute, it doesnt matter
Loop through and add a disabled attribute to all the inputs.
If it made sense for semantics you could apply one disabled attribute to <fieldset> and that would disable all inputs inside (just mentioning for future reference; a fieldset doesn’t look appropriate for using in this form )
Use pointer events: none
<fieldset> always makes sense, in my opinion
there isnt a good reason not to use it
and disabling everything in the fieldset is just amazing: solves a ton of time-eating gremlins
if you add the checkbox that's mandatory by law, and that doesnt exist in the form, then you need to remember to modify the javascript too
if you add the checkbox that's mandatory by law, and that doesnt exist in the form, then you need to remember to modify the javascript tooWhat checkbox? Mandatory by law but doesn’t exist in the form?🤔
yes, the one saying that i consent to the data processing as per the terms and conditions
the one that usually says "read and accept the privacy policy and terms and conditions" or something like that
Aha I see what you’re saying now
exactly
with your method, you would need to change the javascript code
or write it generic to do it for all elements
or ... a single <fieldset>
I was picturing generic for all elements but didn’t really think about it too long. Something like
toggling the attr on the fieldset works too. I suppose it is a group of related content so it’s not entirely unsemantic but not necessarily semantic either 😆
Anyways OP you’ve got a few options now ✨
maybe
inert attribute on form ?that is probably a good alternative, if the spinner thingy is outside the form or element that has the
inert
otherwise, this will bite people in the butt:
Hides the element and its content from assistive technologies by excluding them from the accessibility tree.
I struggle to understand this. If the form has no real function and just serves as a tertiary demo, create an image .svg that looks like it.
the form is supposed to take a backseat for the spinner, but has to work as a form
my bad
Honestly the easiest way to me, is not having the content dictating the sizes but placing the modular content neatly inside a grid layout.
that isnt always possible
also, setting heights on stuff is a quick way to have a very brittle layout
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Didn't even know this existed, but solves my problem 😄
this is way cleaner than adding disabled to every single input.
And is it OK if I put my custom submit Button inside it as well from semantic point of view?
As the name indicates, button is not really a field...
...also thank you kindly for all the input, this was my first post on this channel and I'm glad I tried to post here 🙂
yeah, you can put the button there
it will disable the button as well