Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. 

<div class="modal fade" tabindex="-1" role="dialog" id=
    "blockModel">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Blocked Users</h4>
        </div>
        <div class="modal-body">
                    <span class="blocktag label label-info">
                        <span >Tag 1</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 2</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                      ... (more content) ...

                     <span class="blocktag label label-info">
                        <span >Tag 8</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon 
                            glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

        </div>

    </div><!-- /.modal-content -->
</div>

</div>

Need help setting the modal body to automatically resize its height based on its content.

JsFiddle

jqueryhtmlcssbootstrap-modal

Answer №1

To prevent the floated left spans of your .blocktag from rendering outside their container, simply add clearfix to the modal-body:

<div class="modal-body clearfix">

Answer №2

It is highly recommended to follow Bootstrap's architectural guidelines in order to minimize bugs. By utilizing the rows and columns classes, you can efficiently scale and manage modals.

To enhance your modal-body structure, insert a row and specify a column size as shown below:


       <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              ...insert content here...
            </div>
          </div>
       </div>

This setup allows for easy content splitting using Bootstrap's col-md-* classes. Keeping your code maintainable is crucial when working with Bootstrap ;)

Check out this example showcasing Bootstrap's Architecture

Answer №3

After some trial and error, I found the solution that worked best for me:

Here is the JSFiddle link

The key changes I made were:

height: auto;

I added the above code snippet to the .model-dialog class in bootstrap.min.css on line 7.

Additionally, I modified the model-body class on line 7 of bootstrap.min.css with the following:

display: inline-block;
height: 100%;

Hopefully, these adjustments will work for you as well!

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

angular bootstrap dropdown opening on the left side

I am facing an issue with the angular bootstrap dropdown. I have successfully implemented it, as shown in this link. However, the problem is that the dropdown opens on the right side by default. Is there a way to make it open on the left side instead? Bel ...

cssangularjstwitter-bootstrapangular-bootstrap

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

javascripthtmlreactjs

What could be causing my PHP code to not execute properly alongside the HTML?

I am currently sharpening my skills in PHP by working on a simple web form project. To put it simply, I need to develop a basic web form that accepts a two-dimensional array of European cities along with the distance in kilometers between each pair of citi ...

phphtml

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

htmlcssbootstrap-4

Unable to redirect page in Codeigniter after submitting button

I am facing an issue with inserting and updating data in my database using Ajax to my controller. Despite the data being inserted and updated accurately after clicking the button, the changes are not reflected on my view page until I manually refresh it. A ...

javascriptphpjqueryajaxcodeigniter

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

The moment I attempted to send a POST method through AJAX, I encountered a 404 error. This issue occurred despite using both

I am working with Spring MVC and attempting to integrate jQuery into my project. The following code snippet is part of my web page setup: $(document).ready(function () { var entity = {mag: "status_key", paper: "View10"}; $("#btn").click(function ( ...

javajqueryajaxspringhttp

ScrollSpy Plugin in JQuery - Implementing automatic vertical text scrolling with dynamic height customization

I have been using this code to display the most recent user comments on my website, where some comments are concise while others are more lengthy. If you inspect the source code, you will notice that the height is set to 90px and overflow is set to hidden ...

cssjquery-ui

Executing a PHP script with form parameter onSubmit for sending an email

I am in the process of creating a form that will trigger a script and send data to a PHP page before redirecting away from the site upon submission. The main purpose behind this setup is to ensure that a confirmation email is sent to the individual fillin ...

javascriptphpjqueryajaxforms

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button

I'm working on a toggle button that initially displays the word subscribe on the thumb. When the toggle is disabled, I want it to show unsubscribe instead. Can someone please help me achieve this functionality? Here's the code snippet: <md-s ...

javascripthtmlcssangulartypescript

Is there a way to emphasize a particular day on the calendar obtained from the URL?

I have implemented FullCalendar functionality to enable users to select a specific date, retrieve data from a database, and then reload the page with that data. The page is updated with the selected date in the URL. However, when the page reloads, althoug ...

javascriptcssfullcalendar

Using JQuery to Give the TinyMCE Editor Focus: A Step-by-Step Guide

My current challenge involves adding text to the TinyMCE editor using SELENIUM. I have successfully added text with the following code snippet: $('iframe').last().contents().find('body').text('401c484b-68e4-4bf2-a13d-2a564acddc04& ...

jqueryseleniumtinymce

Obtain the dimensions of an element using the method `Sys

Recently, I have been working on an asp.net 4.0 web application where I encountered a challenge while trying to retrieve the bounds of a panel using Sys.UI.DomElement.getBounds method. My approach involved utilizing JQuery with the following code snippets: ...

asp.netajaxjquery

"Troubleshooting: Sending null values through Jquery ajax to an MVC controller

The issue: I am facing a challenge with saving events in a calendar through ajax by sending the content to my controller function. Despite my efforts, I constantly see null values being passed to my database. Upon inspecting the Network tools console log ...

javascriptjqueryajaxasp.net-corefullcalendar

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Greetings! My objective is to create a material progress bar with the fraction displayed at the top of the percentage. https://i.sstatic.net/GbphJ.png Currently, I have managed to show the fraction at the beginning of the percentage. Below is the code sn ...

htmlcssangulartypescriptangular-material

Tabs within the AutoComplete popup in Material-UI

Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...

javascripthtmlreactjsmaterial-ui

Customize Button Colors in Bootstrap 4

I'm encountering difficulties when attempting to change the color of the buttons labeled "Print," "Excel," and "PDF". Despite referring to a guide, I wasn't able to succeed. The provided test case differs from my code but shares the same CSS and ...

javascriptjquerybootstrap-4datatables

Using jQuery to detect and respond to changes in an asp:RadioButtonList

Upon page load and when a user selects a radio button, the code below focuses on a textbox. However, I am looking to modify it so that if the last radio option "Mail" is chosen, the focus shifts to the btnSubmit control instead of txtPayerName. $(funct ...

c#jqueryasp.net

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

Currently, I am utilizing jQuery mobile to populate a table using ajax. One of the fields in the table is a hyperlink (href) that has a class assigned to it to trigger an alert on the screen. However, the alert does not appear when clicked: I have attempt ...

javascriptjqueryhtmlajaxjquery-mobile