How can I dynamically alter the width of a Bootstrap progress bar using the {{$percentage}} variable in a Laravel stylesheet?

I am currently working on a project where I aim to display the percentage of marks obtained using a progress bar.

I have the percentage value and I am trying to pass this value in the style: "width:{{$percentage}}" so that the progress bar width changes according to the marks obtained, but it is not working. Here is my code:

Take a look at $percentage at the end of the table data->{{round($percentage, 2)}}

<tr>
                                  <td>1</td>
                                  <td>{{$q->name}}</td>
                                  <td>{{$totalQuestions}}</td>
                                  <td>{{$attemptQuestions}}</td>
                                  <td>{{$userCorrectAnswer}}</td>
                                  <td>{{$userWrongAnswer}}</td>
                                  <td>{{round($percentage, 2)}}</td>
                                </tr>

                                @endforeach
                                
                              </tbody>
                            </table>

                            <p>
                                <strong>Percentage</strong> <span class="pull-right small muted">{{round($percentage, 2)}}</span>
                                
                            </p>

                             <div class="progress">

                        <div class="progress-bar" role="progressbar" aria-valuenow="{{$percentage}}" aria-valuemin="0" aria-valuemax="100" style="width : {{$percentage}}">
                              
                                <span class="sr-only">{{round($percentage, 2)}} Obtained</span>

                              </div>

https://i.sstatic.net/yKNX0.jpg

Answer №1

Make sure to include the % in the style declaration.

style="width : {{$percentage}}%"

Answer №2

What happens if you remove all content from the progress-bar div? You might want to consider placing the tag outside of the div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying videos with sound when the autoplay has been successfully implemented, but the audio is not working

I've been working on creating a video player with autoplay functionality, but I'm facing an issue with the sound not playing. Here's what I currently have in my code, but it's not behaving as expected: var myaudio = docum ...

What are some ways to enhance the appearance of the initial two items in a list through CSS?

Is it possible to enhance the appearance of the first 2 elements in a list using CSS for IE8 compatibility? Here is an example of the format: <ul id="list1" style="margin-left:-20%;font-weight:bold" > <li class="xyz"> Element1 </li> ...

Class for Eliminating the Background Image Using Bootstrap

Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...

Issue with jQuery in Internet Explorer causing difficulties loading images

I'm experiencing an issue with my website where all the images load on top of each other when the site is first loaded, creating a chaotic mess. The desired functionality is for the images to remain invisible until specific words are clicked, which is ...

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...

CSS tilt effect in Internet Explorer versions 7 and 8

How can I make my rhombus styled menu work in IE 7 & 8? It's currently functioning fine in Chrome, Firefox, and IE9. Any suggestions or solutions would be greatly appreciated! http://jsfiddle.net/C7e7U/ Thank you in advance. Here is the HTML co ...

Maintaining uniformity in Python by assigning and populating empty values for any missing HTML tags to ensure consistency across structures

Here are the HTML lines I currently have: <nonDerivativeTable> <nonDerivativeHolding> # First Holding <securityTitle> <value>Common Stock</value> </securityTitle> <ownershipNat ...

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

Tips for adjusting the width of items within the Box element in Material UI React

I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements toge ...

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...

Ensure that the entire webpage is optimized to display within the viewport

My goal is to make the entire website fit perfectly into the viewport without requiring any scrolling. The main pages I am focusing on are index, music, and contact, as the other two pages lead to external sources (you can find the link at the bottom of th ...

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

I'm looking to customize the text displayed on the screen from my JSON file. Is there a way to hide this text?

I am currently working with a JSON data file that contains values and displays them on the screen alongside a CSS property width. However, I do not want the output to be the actual numerical data; instead, I aim to connect the JSON file so that the value s ...

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

Preventing default events on a jQuery slider: enhance user experience

I'm currently experimenting with the superslides library for my project, and I have been trying to implement custom effects on the animations. This is how I attempted to do it: During the beforeChange event, I want to prevent the event from propa ...

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

Customizing a tooltip design (popper.js / bootstrap v4 beta)

I recently installed bootstrap v4 beta along with the popper.js (tooltip.js) library to use the tooltip function. However, I am facing difficulty in changing its appearance and style. Despite going through the documentation multiple times, I am unable to u ...

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...