CSS for OPAC login form

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

CSS for OPAC login form

Contact Orielstar
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
[hidden email]
https://lists.katipo.co.nz/mailman/listinfo/koha
Reply | Threaded
Open this post in threaded view
|

Re: CSS for OPAC login form

Pedro Amorim
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 <[hidden email]>:

> 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
> [hidden email]
> https://lists.katipo.co.nz/mailman/listinfo/koha
>
_______________________________________________
Koha mailing list  http://koha-community.org
[hidden email]
https://lists.katipo.co.nz/mailman/listinfo/koha
Reply | Threaded
Open this post in threaded view
|

Re: CSS for OPAC login form

Pedro Amorim
No problem, Dave.

I'm glad I could help.
Please do respond to the list in the future, so others now your problem as
been solved by the suggestion above.

Have a good one,

Pedro Amorim

2017-03-10 12:54 GMT-01:00 Contact Orielstar <[hidden email]>:

> Hi Pedro,
>
> Thanks so much for your help! It works like a charm!
>
> I must be having a bad day today... as soon as I saw your code I knew you
> were correct. I was wondering if there was something in bootstrap itself
> that was not quite right, so maybe it will work itself out of Koha as time
> goes on and versions of bootstrap are upgraded.
>
> Once again, mate, I appreciate you taking the time to come to my aid. Let
> me know if you are ever drowning, and I promise to pull you out of the
> water. LOL.
>
> Cheers,
>
> Dave Jury
>
> On 10/03/17 15:23, Pedro Amorim wrote:
>
> 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 <[hidden email]>:
>
>> 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
>> [hidden email]
>> https://lists.katipo.co.nz/mailman/listinfo/koha
>>
>
>
>
_______________________________________________
Koha mailing list  http://koha-community.org
[hidden email]
https://lists.katipo.co.nz/mailman/listinfo/koha