question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edit profile form field labels overlap placeholders

See original GitHub issue

Observed behavior

Happens in Chrome on Ubuntu, and only on the first load when the user is invited to update their profile. Subsequent entering the Edit profile page displays the labels correctly.

edit-profile-form-labels

Expected behavior

Labels should not overlap the field.

User-facing consequences

Unreadable text, unclear function of the field.

Errors and logs

Steps to reproduce

Login as the user who is still missing the demographic data, so Kolibri directs you to update their profile.

Context

  • Kolibri version: current develop branch
  • Operating system: Ubuntu 18.04
  • Browser: Chrome, but not Firefox

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
jonboisercommented, Sep 6, 2019

The only difference I can tell between the okay case “Profile -> Edit Profile” and the bad case “Notification -> Edit Profile” is that the bad case goes across plugins (Learn -> User), whereas the ok case doesn’t. It seems like it’s probably something related to JS performance, or timing.

0reactions
indirectlylitcommented, Mar 24, 2020

closing as stale

Read more comments on GitHub >

github_iconTop Results From Across the Web

placeholder text overlapping issue - Jotform
I have an issue with the placeholder text overlapping the actual input field text - I think this is caused by the fact...
Read more >
React Material UI Label Overlaps with Text - Stack Overflow
If I click on each field, the label moves up as expected. However, at the page load, labels do not move up. I...
Read more >
Input label does not move up when value or placeholder is sp
I am trying to use mdbootstrap in my meteor app but am running into issues with forms: the label does not move above...
Read more >
Textfield label overlaps if input has placeholder #243 - GitHub
This provides a display where the placeholder overlaps the label making both unreadable. Placeholders are pretty common when you are ...
Read more >
Chrome autofills the Form and the floating label overlaps the ...
I am using the Telerik Form for Blazor. When the application is rendered in Chrome, the browser automatically completes the fields of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found