CSS for OPAC login form
Hi Folks, I am trying to put a border around the login form on the OPAC home page but when I set my display to 768px wide I see some very strange behaviour - well, it seems strange to me. The form element is <form id="auth", and within this form is a fieldset containing the input boxes for username and password. Here's what I am struggling with... the fieldset.brief element is wider than the form element, even though it's inside it. I can't see why as the width is set to auto, but if I try and put a border around the form then the input boxes actually poke through the side. If I put a border around the fieldset.brief element then it hangs over the side of the page. I think I've missed something fundamental and it's cooking my head... can any of you clever css experts out there explain to me what I have missed, and how I can get a box around the login form that looks fine at all screen resolutions? I thank you very much for your help in advance. Regards, Dave Jury.
Hello Dave, Can you try the following css: @media (max-width: 979px) and (min-width: 768px) { input#userid, input#password { width: 100%; box-sizing: border-box; } } I tested this and I think it solves the situation you described. As to the cause of this behaviour, it's probably a mix of how padding adds to the width of the element, the default input element behaviour and some responsive css that got forgotten. Good luck, Pedro Amorim 2017-03-10 10:51 GMT-01:00 Contact Orielstar <contact@orielstar.com>:
Hi Folks,
I am trying to put a border around the login form on the OPAC home page but when I set my display to 768px wide I see some very strange behaviour - well, it seems strange to me.
The form element is <form id="auth", and within this form is a fieldset containing the input boxes for username and password. Here's what I am struggling with... the fieldset.brief element is wider than the form element, even though it's inside it. I can't see why as the width is set to auto, but if I try and put a border around the form then the input boxes actually poke through the side. If I put a border around the fieldset.brief element then it hangs over the side of the page.
I think I've missed something fundamental and it's cooking my head... can any of you clever css experts out there explain to me what I have missed, and how I can get a box around the login form that looks fine at all screen resolutions?
I thank you very much for your help in advance.
Regards,
Dave Jury. _______________________________________________ Koha mailing list http://koha-community.org Koha@lists.katipo.co.nz https://lists.katipo.co.nz/mailman/listinfo/koha
participants (2)
-
Contact Orielstar -
Pedro Amorim