Progress Bar Label Becomes Unreadable at Low Values #477

DaveL17 · 2023-10-23T21:06:59Z

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

When the value of a progress bar becomes very low (counting down to zero), the label can become obscured/unreadable.

Suggested fix: when the value becomes low--say 10%--have the label display to the right of the bar in the "vacated" space.

In which browser(s) did the problem occur?

Firefox, Chrome, Safari

Steps To Reproduce

Literally, simply display a progress bar with a value like 5.

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

BeeMargarida · 2023-11-03T17:51:48Z

This was mentioned in the discord server, I'll leave this open since it's a problem and perhaps we should hide the label or move it outside. Here's a possible workaround that shows the label outside when the value is small:

<script lang="ts">
  import { Flex, Progress, SvelteUIProvider, Text } from "@svelteuidev/core";

  let value = 5;

  function increase() {
    if (value === 100) {
      return;
    }
    value += 5;
  }

  function decrease() {
    if (value === 0) {
      return;
    }
    value -= 5;
  }

  $: label = value <= 5 ? '' : `${value}%`;
</script>

<SvelteUIProvider>
  <Flex>
    <!-- This is necessary since Progress has a position relative, we need
     to set the width of the parent -->
    <div style="width: 100%">
      <Progress bind:value size="lg" {label} />
    </div>
    {#if value <= 5}
      <Text size={12} ml="4">{`${value}%`}</Text>
    {/if}
  </Flex>

  <div style="margin-top: 50px">
    <button on:click={increase}>Increase</button>
    <button on:click={decrease}>Decrease</button>
  </div>
</SvelteUIProvider>

Stackblitz with this: https://stackblitz.com/edit/vitejs-vite-6zjfau?file=src%2FApp.svelte

DaveL17 · 2023-11-03T22:26:22Z

Here's an html/js/css example of what I think would be ideal (the behavior, not necessarily the style). Have the label inside right until the lowest levels and then have it outside right. Rough code below.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Progress Bar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html {
            font-family: "Lato Heavy", sans-serif;
        }
        .container {
            border: solid 1px black;
            border-radius: 6px;
            height: 24px;
            box-shadow: inset #333333 1px 1px 8px;
            width: 100%;
        }
        .bar {
            background-color: #009fff;
            border-radius:3px;
            float: left;
            height:24px;
            width:90%;
        }
        .value {
            color: slategray;
            float: right;
            padding: 3px;
            position: relative;
        }
    </style>
</head>
<body>
    <div>
        <p>Battery Level</p>
        <div class="container">
            <div class="bar">
                <div class="value" id="barValue">90%</div>
                <script>
                    let value = 90
                    let barText = document.getElementById("barValue");
                    if (value >= 10) {
                        barText.setAttribute("style", "right: 0px; color: white");
                    } else {
                        barText.setAttribute("style", "right: -30px; color: slategrey");
                    }
                </script>
            </div>
        </div>
    </div>
</body>
</html>

DaveL17 · 2023-11-09T13:05:35Z

This is fixed and will be included in an upcoming PR.

DaveL17 added the bug Something isn't working label Oct 23, 2023

BeeMargarida added the component New or changes to components label Oct 24, 2023

BeeMargarida added this to SvelteUI board Oct 24, 2023

BeeMargarida moved this to Next in SvelteUI board Oct 24, 2023

BeeMargarida added enhancement New feature or request and removed bug Something isn't working labels Nov 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progress Bar Label Becomes Unreadable at Low Values #477

Progress Bar Label Becomes Unreadable at Low Values #477

DaveL17 commented Oct 23, 2023

BeeMargarida commented Nov 3, 2023

DaveL17 commented Nov 3, 2023

DaveL17 commented Nov 9, 2023

Progress Bar Label Becomes Unreadable at Low Values #477

Progress Bar Label Becomes Unreadable at Low Values #477

Comments

DaveL17 commented Oct 23, 2023

What package has an issue

A clear and concise description of what the bug is

In which browser(s) did the problem occur?

Steps To Reproduce

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Relevant Assets

BeeMargarida commented Nov 3, 2023

DaveL17 commented Nov 3, 2023

HTML

DaveL17 commented Nov 9, 2023