Tips for creating a progress bar label that extends beyond the boundary of the bar

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <style>
span:hover, span:active{
font-size: 150%;
color: black;
text-align: justify;
 line-height: 1.8;
 overflow:visible;
}
span{
overflow:visible;
}

</style>
</head>

<body>
  <div class="row">
<div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
<h5>MVC architecture</h5>
</div>
<div class="col-8 col-offset-2">
<div class="progress" >
<div class="progress-bar" role="progressbar" style="width: 46.66%; margin-left: 33.33%; height: 60px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<span>10 to 24 LPA</span>
</div>
</div>
</div>   
  </div>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; margin-left: 2%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <span>0.6 to 1.5 LPA</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


The content in the progress bar goes out of bounds and gets cut off. Even when the text is hovered over, its font size increases but remains hidden. What's the fix for this issue?

htmlcsstwitter-bootstrap-4

Answer №1

Give this a shot - adjust the text to fit snugly inside your progress bar, creating a sleek look. Utilize position: absolute;

span:hover,
span:active {
  font-size: 150%;
  color: black;
  text-align: justify;
  line-height: 1.8;
  overflow: visible;
  margin: 0 0 0 -15px;
}

span {
  overflow: visible;
  position: absolute;
}

.progress-bar {
  height: 20px;
  border-radius: 0px;
}

.centered{
  text-align: center;
  width: 100%;
  margin: 8px 0 0 -20px;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>

<body>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
     <span class="text-center centered">0.6 to 1.5 LPA</span>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
    </div>
  </div>
</body>

Answer №2

attempt this without using absolute positioning

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <style>
span:hover, span:active{
font-size: 100%;
color: black;

}
.progress> .progress-bar> span{
overflow:visible;
  margin-top:45%;
  display:inline-block;
  position:relative;
  color:red;
  min-width:100px
  
}

</style>
</head>

<body>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; margin-left: 2%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <span>0.6 to 1.5 LPA</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

There seems to be a malfunction in the functionality of my Django template navbar

Within my project, I am utilizing two templates named base.html and contact.html. The contact.html template extends the base.html template, and these are the only two templates in use. When I navigate to the blog or about section by clicking on them, the p ...

htmldjangodjango-viewsdjango-urls

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

Utilizing bootstrap and CSS styling to implement page-level masking for buttons

I struggle with css, but I have a specific design in mind and have attempted to implement it. <div> <div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak > <table class="table table-striped table-bordered"> ...

cssangularjshtmltwitter-bootstrap-3

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

javascriptjqueryhtmlcss

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an i ...

javascripthtmlcss

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

javascripthtmlnode.jsangularjsangular-bootstrap

Embed a photo into a pop-up window

Is there a way to dynamically insert an image into a Modal by utilizing the value of the variable data-image? This variable will change based on the selected image. <script type="text/javascript"> $('#myModal').on('show.bs.m ...

javascripthtmlbootstrap-4

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

JavaScript will not modify the content of the page

Initially, everything was working fine with this code when I was using a JavaScript window prompt to input the length. However, I decided to switch it up and use an if statement along with a dropdown window in the HTML, and now it doesn't seem to be w ...

javascriptjqueryhtml

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

javascriptjqueryhtmlcssdom

Adding information into a separate row via JavaScript

When using XMLHttpRequest to retrieve data from a custom URL, specifically mocki.io and fake JSON, I am encountering an issue where all data elements (element.name and element.city) are being placed in one table row. Ideally, I would like each pair of name ...

javascripthtmlajaxxmlhttprequest

Setting the value of an <h1> element using data from an API response - A simple guide

I have been attempting to update the title of a page using data from an API. Here is my HTML: <h1 id='league_name'></h1> This is my JavaScript code: <script> fetch('https://api.example.com') .then(response ...

javascripthtmlapi

checking if the height of the body is less than 100% using javascript or jquery

On my website, I didn't set a height for the html or body tags. This setup works well on pages with ample content, but when a page has insufficient content, I want the body height to be 100%. I decided to try using jQuery to solve this issue. I came ...

javascriptjqueryhtmlcssif-statement

What is the best way to maintain the same height for a textarea and input fields?

What is the best way to align the message input field with the name and phone input fields? I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly. I ...

htmlcsstwitter-bootstrap

What could be causing my page div to continuously expand on ios devices only?

I'm facing a strange issue where the div element in my document keeps growing endlessly. This problem has been observed on iPhone with iOS 5.1 and 6. It's fascinating to watch the height and min-height values of the page increase continuously, ca ...

jqueryioshtmljquery-mobilemobile-safari

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

javascripthtmlajax

The X path and CSS selector for a particular table will vary on every page

Hello, I am new to HTML and currently working on a project that involves scraping data from html tables using RSelenium. I have managed to use the following code successfully: for(i in 1:50){ remDR$navigate(URLs[i]) CPSHList[[i]] <- remDR$getPageSou ...

htmlrseleniumxpath

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

https://i.stack.imgur.com/q7tMT.png Upon selecting an option from a dropdown within a table row, I make a call to an API to fetch a list of strings into another dropdown field for that specific row. However, the entire column is being populated with that r ...

javascripthtmlangularjsdomparent-child

Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...

javascriptjqueryhtmlcssheight