0

Drupal 8 using Bootstrap theme. I am trying to create a progress bar on my form. I have done it in a block with no problem but in the form it loses the "style" option and displays a blank progress bar.

I put in this:

    $form['pr_bar'] = [
        '#markup' => '<div class="progress">
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
          aria-valuemin="0" aria-valuemax="100" style="width:40%">
            40% Complete (success)
          </div>
        </div>',
    ]; 

and get a blank bar. When i inspect element:

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete (success)</span></div>
</div>

Why is the style option missing and is this causing the blank bar?

  • Sorry, I don't understand how screen reader text relates to my issue, can you please explain further? – matt9292 May 8 '16 at 6:33
1

#markup filters the style option because of the xss filter.

Use an inline template instead:

$form['pr_bar'] = [
  '#type' => 'inline_template',
  '#template' => '
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ complete }}"
      aria-valuemin="0" aria-valuemax="100" style="width:{{ complete }}%">
        {{ complete }}% Complete (success)
      </div>
    </div>',
  '#context' => [
    'complete' => '40',
  ],
];

You can pass the percentage value as twig variable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.