Help Responsive Progress Bar?

[carmona1426]

Paano to gawing responsive ang progress bar? na palagi siyang center sa Business Information yung circle sa word kapag nag zoom in or out?

80% zoom tama naman siya nasa center sa word:

70% zoom hindi na siya center sa mga words na header:

css code:

/*Progress Bar Step*/
:root {
  --line-border-fill: #3498db;
  --line-border-empty: #e0e0e0;
}
* {
  box-sizing: border-box;
}
/* Main container Progress bar Step */
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh; /* You may adjust the height to match your layout */
}
.container1 {
  text-align: center;
}
.progress-container-step {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-left: 200px;
  max-width: 100%;
  width: 850px;
}
.progress-container-step::before {
  content: ""; /* Mandatory with ::before */
  background-color: var(--line-border-empty);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 10px;
  width: 100%;
  z-index: 1;
}
.progress-step {
  background-color: var(--line-border-fill);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 7px;
  width: 0%;
  z-index: 1;
  transition: 0.4s ease;
}
.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--line-border-empty);
  transition: 0.4s ease;
  position: relative; /* Add this line to position the circles above the line */
  z-index: 1; /* Add this line to position the circles above the line */
}
.circle.active {
  border-color: var(--line-border-fill);
  background: linear-gradient(to bottom, #99ccff 0%, #ffffcc 100%);
  color: #080808;
}

html code:

<div class="parent-container">
                                <div class="container1">
                                    <div class="progress-container-step">
                                        <div class="progress-step" ng-style="progressStyle"></div>
                                        <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
                                    </div>
                                </div>
                            </div>

<div class="card-header p-2">
                                                <ul class="nav nav-*****">
                                                    <li class="nav-item"><a class="nav-link active" href="#businessinfo" data-toggle="tab" ng-click="setStep(1)"><i class="fas fa-globe mb-1">&nbsp;</i>Business Information</a></li>
                                                    <li class="nav-item"><a class="nav-link"        href="#businessdocs" data-toggle="tab" ng-click="setStep(2)"><i class="fas fa-briefcase mb-1">&nbsp;</i>Business Registration</a></li>
                                                    <li class="nav-item"><a class="nav-link"        href="#contactdet"   data-toggle="tab" ng-click="setStep(3)"><i class="fas fa-fax mb-1">&nbsp;</i>Contact Details</a></li>
                                                    <li class="nav-item"><a class="nav-link"        href="#productdetails" data-toggle="tab" ng-click="setStep(4)"><i class="fas fa-percentage mb-1">&nbsp;</i>Product Details & Discounts</a></li>
                                                    <li class="nav-item"><a class="nav-link"        href="#scanneddocs" data-toggle="tab" ng-click="setStep(5)"><i class="fas fa-image mb-1">&nbsp;</i>Scanned Documents</a></li>
                                                </ul>
                                            </div>

javascript code:

//Progress Bar Step
    $scope.progressStyle = { width: "0%" };
    $scope.currentActive = 1;
    $scope.circles = [1, 2, 3, 4, 5];
    $scope.update = function () {
        var activeCount = $scope.currentActive - 1;
        $scope.progressStyle = { width: (activeCount / ($scope.circles.length - 1)) * 100 + "%" };
    };
    $scope.isActive = function (index) {
        return index < $scope.currentActive;
    };
    $scope.setStep = function (step) {
        $scope.currentActive = step;
        $scope.update();
    };
    // Initial update
    $scope.update();

 

[🤖]

To make the progress bar responsive and always centered on the "Business Information" word when zooming in or out, you can make the following modifications to your code:

1. CSS Modifications:
- Remove the margin-left: 200px; property from the .progress-container-step class. This will remove the fixed margin and allow the progress bar to center properly.
- Add the following CSS properties to the .parent-container class:

css
     position: relative;
     width: 100%;

This will make the container take the full width of its parent and allow the progress bar to center properly.

2. HTML Modifications:
Wrap the progress bar code in a container div and add the following CSS class to it:

html
   <div class="progress-bar-container">
     ...
   </div>

This will allow us to center the progress bar within the container.

3. JavaScript Modifications:
- Add the following code at the end of the setStep function:

javascript
     var container = document.querySelector('.progress-bar-container');
     container.scrollIntoView({ behavior: 'smooth', block: 'center' });

This code will scroll the progress bar container into view and center it vertically.

Here's the updated code:

CSS code:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh; /* You may adjust the height to match your layout */
  position: relative;
  width: 100%;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 850px;
  position: relative;
}

HTML code:

<div class="parent-container">
  <div class="container1">
    <div class="progress-bar-container">
      <div class="progress-container-step">
        <div class="progress-step" ng-style="progressStyle"></div>
        <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</div>

JavaScript code:

$scope.setStep = function (step) {
  $scope.currentActive = step;
  $scope.update();

  var container = document.querySelector('.progress-bar-container');
  container.scrollIntoView({ behavior: 'smooth', block: 'center' });
};

With these modifications, the progress bar should always be centered on the "Business Information" word when zooming in or out.

 

[carmona1426]

To make the progress bar responsive and always centered on the "Business Information" word when zooming in or out, you can make the following modifications to your code:

1. CSS Modifications:
- Remove the margin-left: 200px; property from the .progress-container-step class. This will remove the fixed margin and allow the progress bar to center properly.
- Add the following CSS properties to the .parent-container class:

css
     position: relative;
     width: 100%;

This will make the container take the full width of its parent and allow the progress bar to center properly.

2. HTML Modifications:
Wrap the progress bar code in a container div and add the following CSS class to it:

html
   <div class="progress-bar-container">
     ...
   </div>

This will allow us to center the progress bar within the container.

3. JavaScript Modifications:
- Add the following code at the end of the setStep function:

javascript
     var container = document.querySelector('.progress-bar-container');
     container.scrollIntoView({ behavior: 'smooth', block: 'center' });

This code will scroll the progress bar container into view and center it vertically.

Here's the updated code:

CSS code:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh; /* You may adjust the height to match your layout */
  position: relative;
  width: 100%;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 850px;
  position: relative;
}

HTML code:

<div class="parent-container">
  <div class="container1">
    <div class="progress-bar-container">
      <div class="progress-container-step">
        <div class="progress-step" ng-style="progressStyle"></div>
        <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</div>

JavaScript code:

$scope.setStep = function (step) {
  $scope.currentActive = step;
  $scope.update();

  var container = document.querySelector('.progress-bar-container');
  container.scrollIntoView({ behavior: 'smooth', block: 'center' });
};

With these modifications, the progress bar should always be centered on the "Business Information" word when zooming in or out.

So magiging center na siya kagaya nito kahit anong zoom?

 

[🤖]

So magiging center na siya kagaya nito kahit anong zoom?
View attachment 2728995

Yes, with the modifications I provided, the progress bar should be centered on the "Business Information" word regardless of the zoom level. The use of flexbox and the removal of the fixed margin will allow the progress bar to adjust and center itself properly.

When you zoom in or out, the progress bar container will take up the full-width of its parent container, and the progress bar itself will be centered within the container. This will ensure that the progress bar remains centered on the "Business Information" word no matter the zoom level.

Please try implementing the suggested modifications and let me know if you have any further questions or issues.

 

[carmona1426]

Yes, with the modifications I provided, the progress bar should be centered on the "Business Information" word regardless of the zoom level. The use of flexbox and the removal of the fixed margin will allow the progress bar to adjust and center itself properly.

When you zoom in or out, the progress bar container will take up the full-width of its parent container, and the progress bar itself will be centered within the container. This will ensure that the progress bar remains centered on the "Business Information" word no matter the zoom level.

Please try implementing the suggested modifications and let me know if you have any further questions or issues.

Mali pa rin kapag nag zoom in ako from 60% to 100%, ang mga circle ay hindi na sa gitna. Dapat lagi siyang sa gitna ng word "Business Information

 

[🤖]

Mali pa rin kapag nag zoom in ako from 60% to 100%, ang mga circle ay hindi na sa gitna. Dapat lagi siyang sa gitna ng word "Business Information

I apologize for the confusion. To ensure that the circles stay centered on the "Business Information" word even when zooming in or out, you can make the following modifications to your code:

1. CSS Modifications:
- Remove the

margin-left: 200px;

property from the

.progress-container-step

class. This will remove the fixed margin and allow the progress bar to center properly.
- Add the following CSS properties to the

.parent-container

class:

css
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

This will make the container take the full width of its parent and align its contents (including the progress bar) to the center horizontally and vertically.

2. HTML Modifications:
Wrap the progress bar code in a container div and add the following CSS class to it:

html
   <div class="progress-bar-container">
     ...
   </div>

This will allow us to center the progress bar within the container.

Here's the updated code:

CSS code:

.parent-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rest of your CSS code */

HTML code:

<div class="parent-container">
  <div class="container1">
    <div class="progress-bar-container">
      <div class="progress-container-step">
        <div class="progress-step" ng-style="progressStyle"></div>
        <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</div>

With these modifications, the progress bar should stay centered on the "Business Information" word even when zooming in or out. The use of flexbox and the center alignment will ensure that the progress bar remains centered at all times.

 

[carmona1426]

I apologize for the confusion. To ensure that the circles stay centered on the "Business Information" word even when zooming in or out, you can make the following modifications to your code:

1. CSS Modifications:
- Remove the

margin-left: 200px;

property from the

.progress-container-step

class. This will remove the fixed margin and allow the progress bar to center properly.
- Add the following CSS properties to the

.parent-container

class:

css
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

This will make the container take the full width of its parent and align its contents (including the progress bar) to the center horizontally and vertically.

2. HTML Modifications:
Wrap the progress bar code in a container div and add the following CSS class to it:

html
   <div class="progress-bar-container">
     ...
   </div>

This will allow us to center the progress bar within the container.

Here's the updated code:

CSS code:

.parent-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rest of your CSS code */

HTML code:

<div class="parent-container">
  <div class="container1">
    <div class="progress-bar-container">
      <div class="progress-container-step">
        <div class="progress-step" ng-style="progressStyle"></div>
        <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</div>

With these modifications, the progress bar should stay centered on the "Business Information" word even when zooming in or out. The use of flexbox and the center alignment will ensure that the progress bar remains centered at all times.

Yes palaging nasa center ang progress bar pero kapag nag zoom in or out ako hindi magiging center ang Business Information - Scanned Documents. Dapat sumama yung mga circles sa mga word na yan para laging nasa gitna

 

[🤖]

Ay bakit ganun

I apologize for the confusion earlier. To ensure that the progress bar and circles are always centered on the "Business Information" - "Scanned Documents" words, you can make the following modifications to your code:

1. CSS Modifications:
- Remove the

margin-left: 200px;

property from the

.progress-container-step

class. This will remove the fixed margin and allow the progress bar to center properly.
- Replace the

.container1

class with the following CSS properties:

css
     .container1 {
       text-align: center;
       width: 100%;
       max-width: 850px;
       margin: 0 auto;
     }

This will center the container horizontally and limit its maximum width to 850px.

2. HTML Modifications:
Update the HTML code for the progress bar container to include the "Business Information" - "Scanned Documents" words as follows:

html
   <div class="progress-bar-container">
     <div class="progress-container-step">
       <div class="progress-step" ng-style="progressStyle"></div>
       <div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">
         {{ index + 1 }}
       </div>
     </div>
     <div class="progress-bar-text">
       <span class="progress-bar-word">Business Information</span>
       <span class="progress-bar-word">Business Registration</span>
       <span class="progress-bar-word">Contact Details</span>
       <span class="progress-bar-word">Product Details & Discounts</span>
       <span class="progress-bar-word">Scanned Documents</span>
     </div>
   </div>

This adds a separate container for the progress bar words