UL/LI shrinking Inside DIV

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
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

Marta Szymanska staff pro premium answered 7 years ago

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.

Marta Szymanska staff pro premium answered 7 years ago

So, everything is fine for now?
Write
Create snippet
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
About author
decosvaldo
Pro User
42Support score
16Questions 10Answers
0Snippets likes 1Snippets