UL/LI shrinking Inside DIV


Topic: UL/LI shrinking Inside DIV

decosvaldo pro asked 7 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
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 7 years ago

Thanks, I'll test and post the result.

decosvaldo pro commented 7 years ago

Fixed with w-100 on media body. Thanks

decosvaldo pro answered 7 years ago

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.
So, everything is fine for now?
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No