The user profile page from core uses the "label" class. With default bootstrap styles this is white text on a transparent background. We need to modify this markup to be more Bootstrap friendly. Perhaps the most appropriate would be a description list, possibly the horizontal variant.

Here is the markup that is currently produced:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'user' -->
<!-- BEGIN OUTPUT from 'core/modules/user/templates/user.html.twig' -->
<article data-quickedit-entity-id="user/1" typeof="schema:Person" about="/user/1">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element' -->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/input/form-element.html.twig' -->
<div class="form-item js-form-item form-type-item js-form-type-item form-item- js-form-item- form-no-label form-group">
  <h4 class="label">Member for</h4> 1 month
  </div>
<!-- END OUTPUT from 'themes/bootstrap/templates/input/form-element.html.twig' -->
</article>
<!-- END OUTPUT from 'core/modules/user/templates/user.html.twig' -->
CommentFileSizeAuthor
#3 bootstrap-2761137-member-for-label-is-invisible.patch1.14 KBmstrelan

Comments

mstrelan created an issue. See original summary.

mstrelan’s picture

mstrelan commented

Another option would be a static form control.

It looks like the label is hardcoded by user.module

/**
 * Implements hook_ENTITY_TYPE_view() for user entities.
 */
function user_user_view(array &$build, UserInterface $account, EntityViewDisplayInterface $display) {
  if ($display->getComponent('member_for')) {
    $build['member_for'] = array(
      '#type' => 'item',
      '#markup' => '<h4 class="label">' . t('Member for') . '</h4> ' . \Drupal::service('date.formatter')->formatTimeDiffSince($account->getCreatedTime()),
    );
  }
}

It may be tricky to group it with other items inside a description list, but it could be in a list of its own. Are there ever any other items? The only other instance in core of <h4 class="label"> is in filter-guidelines.html.twig. In that instance Bootstrap should probably override the template to use a description list.

mstrelan’s picture

mstrelan commented
Title: User profile field labels are invisible » "Member for" label is invisible
Category: Bug report » Feature request
Status: Active » Needs review
StatusFileSize
new bootstrap-2761137-member-for-label-is-invisible.patch1.14 KB

I think core should render the "Member for" consistently with other user profile fields, but until then this patch will make it looks similar to Bartik.

mstrelan’s picture

mstrelan commented
Related issues: +#2638250: The label "Member for" on user profiles is hardcoded markup that is different from other user fields

Sorry for all the noise. Just found the core issue.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Needs review » Closed (duplicate)

Yes, this is a core issue.