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.

[Progress] Should have an option to omit the min width on the bar

See original GitHub issue

Steps

<div class="ui small progress" data-percent="0">
  <div class="bar" style="width: 0%;"></div>
  <div class="label">0/1</div>
</div>

Expected Result

image

Actual Result

image

Version

0.78.3

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
llturrocommented, Jul 18, 2018

LESS compiles to CSS. The LESS instruction where @barMinWidth is used is

@barMinWidth: 2em;
@activeMinWidth: @barMinWidth;

.ui.progress .bar {
  min-width: @barMinWidth;
}

.ui.active.progress .bar {
  min-width: @activeMinWidth;
}

Should be possible to emulate the proposed solution in your CSS by adding

.ui.progress .bar {
  min-width: 0 !important;
}

.ui.active.progress .bar {
  min-width: 0 !important;
}
0reactions
hammy2899commented, Dec 19, 2019

@dhanushkac Depends, if you need to JS fixes in the linked PR then no but if you need to CSS fixes then yes it will work as long as your using fomantic not semantic.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to affect minimal width of the HTML5 progress element?
When the text is long, the progress correctly stretches across the available width which is determined by the length of the text because...
Read more >
[Progress] Should be empty at 0% · Issue #6445 - GitHub
Steps Create a Progress element at 0% Expected Result Bar should ... [Progress] Should have an option to omit the min width on...
Read more >
Reduce the min-width and width for the progress bar - Drupal
Reduce the min-width and width for the progress bar. Active. Project: ... Determine if the width should be reduced from 3 to 1...
Read more >
ARIA: progressbar role - Accessibility - MDN Web Docs
The progressbar range widget indicates that a request has been received and the application is making progress toward completing the ...
Read more >
The HTML5 progress Element | CSS-Tricks
Simulate the look and feel of progress bar using div and span inside the progress tag. Modern browsers will ignore the content inside...
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