Topic-icon Modal Popup Password Field too small

Active Subscriptions:

None
1 month 6 days ago #67289 by daniej
Most passwords are longer these days... I have found that when using a long password and the 'eye' icon covers the last few characters.  Is there a way to lengthen the box?
or put the eye icon below the box? 
Attachments:
The topic has been locked.
Support Specialist
1 month 5 days ago - 1 month 5 days ago #67290 by mel
You can easily update the width on the box. The CSS could be something like this:
.sclogin input[type=password] {
width: 200px; /* or whatever size you want */
}

If that doesn't work, send a URL where we can see the module and we can suggest different CSS.

If you haven't already, I would suggest creating a theme for SCLogin and copy over the theme you're using to a new one (so no changes will be lost if you upgrade).

-Melissa
Last edit: 1 month 5 days ago by mel.
The topic has been locked.
Active Subscriptions:

None
1 month 4 days ago #67292 by daniej
Where is this css code located? I am using prostar template.
The topic has been locked.
Support Specialist
1 month 4 days ago #67294 by alzander
Usually, the template CSS is in a file like:
/templates/<your_template>/custom.css
/templates/<your_template>/template.css

Or possibly in a special CSS folder:
/templates/<your_template>/css/custom.css
/templates/<your_template>/css/template.css

It's always best to use the 'custom.css' file (if it exists) as that is meant for your own CSS customizations and *shouldn't* be overwritten on updates to Joomla.

I hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
1 month 4 days ago - 1 month 4 days ago #67297 by daniej
Thank you for your direction... I found that you need to add a "user.css" now... not custom.css which I did... but when I change the css to
.sclogin input[type=password] {
width: 80px;}
The password box did increase in size but when I clicked the eye icon to view the password... the box shrank back to the original size which covers the last three or four characters with the eye icon.

Attachments:
Last edit: 1 month 4 days ago by daniej.
The topic has been locked.
Support Specialist
1 month 3 days ago #67298 by mel
That means that another element also needs to be targeted with that css. From the code, we change the type of the input from password to text, so I think you'll need the following instead of type=text
.sclogin input[name=password] {..}

-Melissa
The topic has been locked.
Active Subscriptions:

None
1 month 3 days ago - 1 month 3 days ago #67301 by daniej
.sclogin input[type=password] {width: 80px;}

I used above... do not see "text" did you mean "type" to "name"
.sclogin input[name=password] {width: 80px;}
This did not work same result
Last edit: 1 month 3 days ago by daniej.
The topic has been locked.
Support Specialist
1 month 3 days ago #67302 by alzander
The CSS selector should be:
.sclogin input[name=password] { width: 80px; }

When you hit the eyeball it changes the type from type=password to type=text, so when you target type=password, that doesn't work when the eyeball is enabled.

I hope that helps get you going now, but if you need anything else, just let us know!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
1 month 3 days ago - 1 month 2 days ago #67303 by daniej
I used .sclogin .sclogin input[type=password] { width: 80px; }
mentioned originally by Melissa and
.sclogin input[name=password] { width: 80px; }
and got the same result for either or both...
What am I missing here...
Last edit: 1 month 2 days ago by daniej.
The topic has been locked.
Support Specialist
1 month 2 days ago #67308 by mel
My guess is that we're using the Developer Tools of our browser on sourcecoast.com to come up with the element selectors and different selectors may work for us since we're using the 9.0beta for SCLogin on our site. If you're using SCLogin from the 8.4.x versions, can you let us know a URL where we can see the behavior in action? That way we won't have to keep going back and forth. If you don't want to post the URL in the forum, send it in an email to This email address is being protected from spambots. You need JavaScript enabled to view it.

-Melissa
The topic has been locked.
Social Stream
Hide. Seek. Play!

Countdown Hide & Seek Game

Countdown, the new hide & seek toy, is available now! Designed and developed by the founders of SourceCoast, it's the perfect toy to get your kids moving at all ages.

Learn More About the Hide and Seek Toy