UL/LI shrinking Inside DIV

Topic: UL/LI shrinking Inside DIV

decosvaldo pro asked 6 years ago

Hi, I'm using a file upload projet that uses bootstrap 4. When files are selected, they go to a div that creates <li> inside an <ul> tag for each processed file. The div has a limited size, but when the number of files exceed the limit on screen, they become shrinked. I would like to maintain their sizes and allow the parent div to scrool correctly. Check this image: https://80minutos.com.br/img/error.jpg The code that is generated from the script is this one: Check this image: https://80minutos.com.br/img/error2.jpg Can you give me a tip on how to force each field to keep size and force parent <div> or parent <ul> to scrool? Thanks Andre Luiz Paiz

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

Hi,

I've tried to reproduce your code from the screens and maybe this construction will be helpful for you:

If it isn't helpful, please provide more details of your problem and your code for better reporoduction of the issue.

Best,

Marta

Please insert min. 20 characters.

Hi, I've tried to reproduce your code from the screens and maybe this construction will be helpful for you:

<ul class="list-unstyled p-2">
<li class="media d-flex flex-column">
<div class="media-body mb-1">
<p class="mb-2"><strong>test </strong><span class="status text-success">test test</span></p>
</div>
<div class="progress mb-2" style="height: 20px">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<hr class="mt-1 mb-1 w-100">
</li>
<li class="media d-flex flex-column">
<div class="media-body mb-1">
<p class="mb-2"><strong>test </strong><span class="status text-success">test test</span></p>
</div>
<div class="progress mb-2" style="height: 20px">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<hr class="mt-1 mb-1 w-100">
</li>
<li class="media d-flex flex-column">
<div class="media-body mb-1">
<p class="mb-2"><strong>test </strong><span class="status text-success">test test</span></p>
</div>
<div class="progress mb-2" style="height: 20px">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<hr class="mt-1 mb-1 w-100">
</li>
<li class="media d-flex flex-column">
<div class="media-body mb-1">
<p class="mb-2"><strong>test </strong><span class="status text-success">test test</span></p>
</div>
<div class="progress mb-2" style="height: 20px">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<hr class="mt-1 mb-1 w-100">
</li>
</ul>

If it isn't helpful, please provide more details of your problem and your code for better reporoduction of the issue. Best, Marta

decosvaldo pro commented 6 years ago

Thanks, I'll test and post the result.

decosvaldo pro commented 6 years ago

Fixed with w-100 on media body. Thanks

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

So, everything is fine for now?

Add comment

decosvaldo pro answered 6 years ago

0 0 Best answer

Hi Marta, thank you for your reply. Your code fixed the vertical problem. Thank you for that. But now I have a horizontal problem. Check this image: https://80minutos.com.br/img/error3.png I believe we're close. I'm sending pictures because my code is written dinamically, with PHP.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

decosvaldo

Pro User 42Support score
16Questions 10Answers 1Snippets