The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div.

Here is the code snippet:

<div class="form-group col-xs-12">
        <fieldset class="field_set col-xs-12">
            <legend style="font-weight:bold;font-size:20px"> &nbsp;Sproc Details:</legend>
            <div class="col-xs-12">
                <div class="form-group col-xs-3">

                    <span>
                        Application Name <span></span>
                    </span>
                </div>
                <div class="form-group col-xs-2">
                    <span>
                        DB Name <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-3">
                    <span>
                        Schema Name <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-4">
                    <span>
                        Sproc Name <span></span>
                    </span>

                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group col-xs-3">

                    <span class="btn btn-block btn-success">
                        {{appName}} <span></span>
                    </span>
                </div>
                <div class="form-group col-xs-2">
                    <span class="btn btn-block btn-success">
                        {{dbName}} <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-3">
                    <span class="btn btn-block btn-success">
                        {{schemaName}} <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-4">
                    <span class="btn btn-block btn-success">
                        {{sprocName}} <span></span>
                    </span>
                </div>
            </div>
        </fieldset>
    </div>

The CSS for fieldset is:

.field_set {
    border: 2px white solid;
    padding: 4px;
}

Upon execution, the output appears truncated as shown below:

It seems like the content is not fully displayed.

Answer №1

Substitute:

<legend style="font-weight:bold;font-size:20px"> &nbsp;Sproc Details:</legend>

For:

<legend style="font-weight:bold;font-size:20px;width:8%;"> &nbsp;Sproc Details:</legend>

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

What could be the reason for this tag showing up empty after being parsed with beautiful soup?

Currently utilizing beautiful soup to parse through this particular page: In an effort to retrieve the total revenue for 27/09/2014 (42,123,000) which is among the primary values at the top of the statement. Upon examining the element in chrome tools, it ...

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

I'm facing a challenge with getting the 'extend' feature to function correctly while using Flask in Python

As someone who is just starting out in programming, I recently decided to embark on creating a web app using flask, python, and HTML. To start off, I set up three essential files - two HTML files, and one python file. The first HTML file requiring informa ...

Can you explain the distinction between [att|=val] and [att~=val] in css?

Could someone help me differentiate between the [att|=val] and [att~=val] attributes in CSS? I'm having trouble grasping the concept. Thank you! ...

What is the proper way to apply a background color to the entire body using CSS?

I'm facing an issue with getting the background color to cover the entire body of my webpage. Currently, it only captures a certain size and when there is scrolling on the window, two shades of colors appear. I want the background color to span the en ...

Align an Svg layer within another Svg to the center

I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...

Tips for including a footer element in React:How can a footer division be

I need help with implementing a footer in my React web app. Currently, the body section in index.html looks like this: <body> <div id="root"></div> <script src="index.js"></script> </body> Inside index.js, the rend ...

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

What steps can be taken to properly display dateTime values in a data table when working with JavaScript (VueJS) and PHP (Laravel)?

I am facing an issue where I am unable to save user inputted date-time values from a modal into a data table. Despite receiving a success message, the dateTime values are not being added to the table. My payload only displays the state and approval fields ...

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

Confirm the checkboxes that are necessary

In the realm of my AngularJS project, I am eager to develop a terms and conditions form. Among multiple checkboxes, only select few are deemed necessary. My aim is to activate the submit button solely when all required checkboxes have been checked. Below ...

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

Troubleshooting: My JSON value is not being formatted by the AngularJS date

I am facing an issue with formatting JSON data in my service. The JSON data is returned in the following format: "Results":[{"Id":"1","SomeDate":"2/19/2013 10:34:04 PM"} When I try to use binding to format the date, it does not work as expected and just ...

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...