Ensuring that the content fits perfectly inside a div using either Bootstrap or

I am facing an issue with two nested divs. One of them has a button that I want to stick to the bottom of the parent div, while the other contains text or a list of persons. The problem arises when the text is lengthy, causing it to overflow the div. I am struggling to find a solution. Here is the code snippet:

 <div class="white container shadow-box-5 fixed-bottom">
   <div class="fluid-container position-relative h-100">
      <div class="flex-wrapper h-100">
         <div class="pt-3">
            <span>
                 Lorem ipsum dolor sit amet, consectetur adipisicing
                 elit. Exercitationem officia odit omnis maiores nesciunt
                 numquam voluptas quo perspiciatis quaerat aperiam
                 tempore excepturi pariatur ducimus, nihil, eveniet iure
                 culpa dicta minus! Lorem ipsum dolor sit amet,
                 consectetur adipisicing elit. Distinctio optio, pariatur
                 quaerat sunt quam magnam numquam. Quia reiciendis
                 delectus dignissimos totam cum ex repellendus aliquid
                 esse. Dignissimos doloremque suscipit ullam! Lorem ipsum
                 dolor sit amet consectetur adipisicing elit. Commodi
                 fugiat culpa iure quas, vero nesciunt quaerat
                 repellendus dolor dignissimos aspernatur odio harum,
                 sequi, quidem aliquam doloremque repellat quae veritatis
                 magnam.
            </span>
        </div>
        <div class="position-absolute w-100 mb-4">
           <button
               @click="
               $router.push({
                   name: 'ECommerce',
                   hash: '#productmonth',
               })
               "
               type="button"
               class="btn btn-primary btn-block"
           >
               Compare
           </button>
        </div>
     </div>
  </div>

Here is the current appearance of the div.

https://i.sstatic.net/acXiD.png

javascripthtmlcssvue.jsbootstrap-4

Answer №1

<div class="blue container shadow-box-7 fixed-bottom">
            <div class="fluid-container position-relative h-100">
              <div class="flex-wrapper h-100">
                <div class="pt-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat nulla nec libero ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Integer eu urna at arcu rhoncus luctus ac id felis. Proin ut turpis et ligula consequat fermentum. Duis in turpis et mauris pharetra laoreet. Fusce vitae eros at nunc consequat fermentum. Cras sed nibh velit. 
                </div>
                <div class="position-relative w-100 mb-4">
                  <button
                    @click="
                      $router.push({
                        name: 'ECommerce',
                        hash: '#productoftheday',
                      })
                    "
                    type="button"
                    class="btn btn-primary btn-block"
                  >
                    Compare Now
                  </button>
                </div>
              </div>
            </div>

Give it a try!

Let me know if you need more details.

Answer №2

It appears that you are utilizing Tailwind CSS. Here is a snippet of code to help you out. You can also test it out using Tailwind Play.

<section class="bg-red-50 border-red-100 border-8 h-screen p-6">
  <div class="flex flex-col flex-nowrap gap-y-4 h-full">
    <div class="flex-grow overflow-y-auto">
      <p>Friday night. I hate the Wetlands. They're stupid and wet, and there are bugs everywhere, and I think I maced a crane.</p>
      <p class="mt-4">But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. Heyyyyy, hermano. I don't appreciate the dry British humor. I never thought I'd miss a hand so much! Get rid of the Seaward.</p>
      <p class="mt-4">Lucille: I'll leave when I'm good and ready. I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense.</p>
    </div>

    <div class="flex-none">
      <button class="bg-red-500 p-3 rounded text-white w-full">Comparar</button>
    </div>
  </div>
</section>

Answer №3

What I did was simply include an overflow-auto property to the div that surrounds the span. Surprisingly, it was much easier than I anticipated.

      <div class="white container shadow-box-6 fixed-bottom white-card">
        <div class="fluid-container position-relative h-100">
          <div class="flex-wrapper h-100 pt-4">
            <div class="overflow-auto px-2" style="height: 80%">
              <div
                v-for="(persona, index) in ranking"
                :key="'persona' + index"
                class="persona-container"
              >
                <div v-if="index >= 1">
                  <div
                    class="
                      d-flex
                      align-items-center
                      justify-content-between
                      px-2
                      my-3
                      person-box
                    "
                    :class="
                      persona.id_sharp == user_idSharp
                        ? 'person-back2'
                        : 'person-back1'
                    "
                    :id="
                      persona.id_sharp == user_idSharp ? 'active' : 'inactive'
                    "
                  >
                    <div class="col-1 text-center">
                      <p class="font-Roboto fs-16 my-auto text-gray-400">
                        {{ index + 1 }}
                      </p>
                    </div>
                    <div class="col-2 pl-2">
                      <div v-if="persona.prof_picture == null">
                        <img
                          src="@/assets/img/questionmark.png"
                          alt=""
                          class="avatar-3 rounded-circle shadow-box"
                        />
                      </div>
                      <div v-else>
                        <img
                          :src="
                            'https://api-dev.embajadores.com.co/' +
                            persona.prof_picture
                          "
                          alt=""
                          class="avatar-3 rounded-circle shadow-box"
                        />
                      </div>
                    </div>
                    <div class="col overflow-hidden p-3">
                      <div class="">
                        <p
                          class="
                            font-RobotoBold
                            fs-14
                            text-capitalize text-truncate
                            my-1
                          "
                        >
                          {{ persona.site.name.toLowerCase() }}
                        </p>
                        <p
                          class="
                            font-Roboto
                            fs-14
                            text-capitalize text-truncate
                            my-1
                          "
                          :class="
                            persona.id_sharp == user_idSharp
                              ? 'text-gray-400'
                              : 'text-gray-300'
                          "
                        >
                          {{ persona.name.toLowerCase() }}
                        </p>
                      </div>
                    </div>
                    <div class="col-2">
                      <div
                        class="shadow-box-2 bor-rounded-xs text-center"
                        style="width: 38px; height: 38px"
                      >
                        <p
                          class="font-RobotoBold fs-16"
                          style="line-height: 38px"
                        >
                          {{
                            Math.round(
                              parseFloat(
                                persona.average
                                  .substring(0, 5)
                                  .replace(",", ".")
                              )
                            )
                          }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="tag-3 image-container-2 text-center"
              @click="scroll('active')"
            >
              <!-- <p
                class="
                  fs-16
                  font-RobotoBold
                  rounded-circle
                  bg-orange-450
                  h-100
                  line-height-30
                  mx-auto
                  text-white-100
                "
              >
                1
              </p> -->
              <i
                class="
                  icon-flecha-abajo
                  text-white-100
                  bg-orange-450
                  rounded-circle
                  fs-30
                "
              ></i>
            </div>
            <div class="position-absolute w-100 mb-4">
              <button
                @click="
                  $router.push({
                    name: 'CompareLeaders',
                  })
                "
                type="button"
                class="btn btn-primary btn-block"
              >
                Compare
              </button>
            </div>
          </div>
        </div>
      </div>

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

Are there any libraries available that can assist with managing forms similar to how Google Contacts handles them

By default, Google Contacts has a feature where the form displays values with some of them being read only. However, when you click on a value, it converts the field into an editable form so you can easily make changes. After editing and pressing enter, th ...

javascriptruby-on-railsajax

why doesn't the promise return the record after it has been updated

After completing the form, I proceed to send it as an object to the API NodeJS. The following is the execution function: .post('/create/card', function (req, res) { var rb = req.body, obj = { query: { $set ...

javascriptnode.jspromise

Discover a JavaScript table using a for loop

Currently, I'm in the process of setting up a search bar within a table that has been populated by looping data retrieved from an API. My goal is to allow users to search for specific entries either by name or email. Unfortunately, I seem to be encoun ...

javascriptajaxfor-loophtml-tablesearch-box

Tips for customizing the appearance of ToggleButton in material-ui

Currently, I'm working on customizing the ToggleButton in order to change the default color when it is selected. However, my attempts have been fruitless so far. const customizeStyles = makeStyles((theme) => ({ toggleButtonSelected: { &q ...

cssreactjsmaterial-ui

What is the best method for sending a user to a different page when a webhook is triggered by an external API in

In my project using NextJS and the pages router, I encounter a scenario where a user initiates a process through a form that takes approximately 30 seconds to complete. This process is carried out by an external API over which I have no control. Once the p ...

javascriptreactjsnext.jswebhooksreplicate

Using the event object in the onClick handler within React applications

In my React app, I have implemented a feature where clicking on a column heading sorts the data in the table using merge sort algorithm My goal is to pass both the data (an array of objects) and the event object to the sorting function. However, I am faci ...

javascriptreactjs

Facing issue with "npm run build" command while building on VSTS/Azure DevOps

I encountered a strange issue with my Vue project during deployment on the Azure DevOps platform. Everything worked fine on my local machine, but when I tried to run "npm run build" on Azure DevOps, I started getting multiple "ELIFECYCLE" errors that left ...

azurevue.jsnpmtfsazure-devops

Issue encountered: Inability to implement asynchronous functionality within a forEach loop while making an API request

When making a GET API call, the code looks like this router.get('/review', async (req, res) => { try { const entity = await Entity.find(); const entityId = []; Object.keys(entity).forEach((key) => { entityId.push(entity[ ...

javascriptnode.jsmongodbexpress

Experimenting with Selenium to automate processes involving dynamic class attributes

My issue involves a Button class = "searchbar__SearchButton-sc-1546roh-3 searchbar__CancelButton-sc-1546roh-4 glEceZ" I am attempting to locate this element in the browser using return browser.element('button[class^="searchbar__CancelButton-"]&ap ...

javascriptselenium-webdriver

Creating an asynchronous endpoint in Express

Looking for some assistance in setting up a basic endpoint using Express to practice async/await functionality. Here's the code snippet I'm working with: app.post('/products', async (req, res) => { try { console.log ...

javascriptnode.jsexpressasynchronous

Interactive button functionality in Flutter

Just like on WhatsApp, the search icon and more_vert icons dynamically change depending on whether you are in the Chats, Calls, or Status view. For example, when you click on the search icon in the Chats view, you can search all your contacts. Similarly, i ...

vue.jsflutter

Create a serverless PowerShell script on Azure that generates HTML content to display on a web browser

Recently, I developed a PowerShell script in Azure serverless that generates HTML content. It works perfectly fine when accessed from Firefox or Chrome as the HTML document opens in the browser. However, the issue arises when using Microsoft's browser ...

htmlazurepowershellserverless

Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet: h2.titulo { width: 100%; margin: 10px 0; padding: 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; display: block; color: ...

htmlcss

Passing JSON information through PatternLab

Incorporating an atomic pattern and passing data from a JSON array is my goal. Below are the code snippets and JSON file. anchor-link.mustache <a href="{{ url }}" class="{{ class }}">{{ label }}</a> footer-nav.mustache <ul class="menu ve ...

javascriptmustachepatternlab.io

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

After developing some basic jQuery code using if-statements to toggle the visibility of Divs based on a select list in HTML, I am seeking ways to enhance this code: 1) How can I achieve the same functionality with fewer lines of code? 2) Rather than manu ...

javascriptjqueryhtmlif-statementoptimization

Firebase Error: Page Not Found

I recently set up an Angular2 application and added Firebase using npm. I successfully imported it into my app.component.ts without any errors showing up in my text editor. The package.json file also indicates that Firebase is installed correctly. However ...

javascriptangularfirebasenpm

Google Maps fails to load when triggered by the jQuery show() function

One issue I'm facing is that the Google Map is not loading after the show() function is called in jQuery. Initially, I use display:none to close a division on page load. After some research, I found out that it can be resolved by using google.maps.eve ...

javascriptphpjquerygoogle-maps

Baffled by the data visualization produced by Google Chart using information from

Perhaps I'm being a bit ambitious, but I managed to create a basic Chart using GoogleCharts. The problem is that I have to input the values manually, but I want to retrieve them from the Database. I know JSON can accomplish this, but I've spent f ...

javascriptjsonchartsgoogle-visualization

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

javascripthtmlangularionic2

Update the JSON data based on the specifications outlined in my project

class Transformation { constructor() { this.colHeaders = { error_description: "Description", error_status: "Status", error_code: "Error Code" }; } getColHeader() { return this.colHeaders; } } var jsonData = { error ...

javascriptjson