Input placeholders not working correctly

Jason Jones Posted in Technical Support 7 years ago

Currently working on a theme and have found that placeholder responses for different browsers give completely different results.

Anyone found a work around?

Replies
au Jason Jones Replied 7 years ago

Just looking at the placeholder issue again.

Changing line 27 of the CSS default.php may be an easier way to get around the problem

.ossn-form input[type='password' class='form-control'],

If you add class='form-control' here then individual forms do not have to be changed.

au Jason Jones Replied 7 years ago

Resolved - Thanks very much for your help.

au Jason Jones Replied 7 years ago

Thank you it worked a treat.

Any idea how to fix the fields placeholder colour, in particular the Birthdate?

Other files that have the same problem:

Ossn Search - search.php
Ossn Wall - container.php x 3
Core - list_search.php
Softlab Access Code component - settings.php

German Michael Zülsdorff Replied 7 years ago

Ok, I'm able to narrow down the problem:
The placeholder color is set in bootstrap.min.css.php - as you already found out - but Ossn simply isn't making use of the class "form-control" :)

Since you're working on your own theme anyway, this is the right time for making friends with Ossn's component plugin system. In order not to touch the core registration form, make it part of your theme instead.

The core registration form (signup.php is located in system/plugins/default/forms, and the first step is to expand the theme's plugins structure for the missing forms subdiretory. Thus, inside your own theme move to:
1. yourtheme/plugins/default
2. create a subdirectory named forms
3. copy signup.php from system/plugins/default/forms to your newly created forms folder

At this stage your theme's signup form has already more priority than the core signup form. So the last step is to edit your theme's signup.php and add the missing form-control class to every input field like:

<input class="form-control" type="text" name="firstname" placeholder="<?php echo ossn_print('first:name'); ?>"/>

Good luck and thanks for reporting.

P.S. If you want to change the placeholder color, it makes sense to copy the styles from bootstrap.min.css and put it into your theme's css file and edit the color there.

au Jason Jones Replied 7 years ago

Your are correct. The colours defined in bootstrap.min.css.php for placeholders, registration and search etc. display as follows:

Firefox - correct
Opera - incorrect (white/grey)
Safari - incorrect (white/grey)
Edge - incorrect (white/grey)
Explorer - incorrect (defined font colour)

It is not as recognisable on the standard theme as the default colour is a white/grey very similar to the browser non-defined placeholder colour. This is fine with a standard theme, but no good if you want to customise.

You can easily see that on your demo using Explorer the colour for placeholders is black, and different for other browsers.

To highlight the problem simply edit the theme placeholder colours in bootstrap.min.css.php.

Mine as follows:

.form-control::-moz-placeholder{color:#777700;opacity:1}.form-control:-ms-input-placeholder{color:#777700}.form-control::-webkit-input-placeholder{color:#777700}

Try several different browsers and you will see the problem.

German Michael Zülsdorff Replied 7 years ago

Okay,
but I still have no idea which way this is related to Ossn? We're using placeholders in the registration form for instance, and so far I can't see no problems with IE11 and Windows10.

So please leave us some concrete hints (or perhaps a screenshot) where the problem occurs and what OS / device you're using. (See https://www.opensource-socialnetwork.org/wiki/all and especially "How to report a bug")

au Jason Jones Replied 7 years ago

These don't work at all on Edge or Safari, and only partially on Explorer.

::-webkit-input-placeholder { /* Chrome/Opera/Safari /
color: #whatever;
}
::-moz-placeholder { /
Firefox 19+ /
color: #whatever;
}
:-ms-input-placeholder { /
IE 10+ /
color: #whatever;
}
:-moz-placeholder { /
Firefox 18- */
color: #whatever;
}

German Michael Zülsdorff Replied 7 years ago

Pardon?