I'm encountering layout issues with my table when using the repeater in Bootstrap

I am experiencing an issue with nested repeaters inside a repeater while trying to incorporate Bootstrap for layout purposes. The layout appears distorted when placed within a div with the class "row". Even when isolated, the layout remains problematic. Removing the divs resolves the rendering issues. Here is the code snippet for reference:

 // Insert your code here

Apologies for the lengthy code snippet, I tried to condense it as much as possible. A collapsed view of the code is provided in the following image for better clarity:

https://i.sstatic.net/cAZMw.jpg

Answer №1

Understanding where you are in your code is crucial, and having clean code makes this process much easier. It seems like there was an extra div element that shouldn't have been there:

<div class="container-fluid">
<div class="row">
    <div class="col-sm-2 col-md-2 col-lg-2" style="border-bottom:double;">
        <ul class="nav flex-column" style="margin-left: -15px;">
            (navigation menu)
        </ul>
    </div>
    <div class="col-sm-10 col-md-10 col-lg-10" style="border-bottom:double">
        <div class="row">
            <div class="col-3">
                ... an invisible panel...
            </div>
            <div class="col-12">
                ... panel with search option for populating repeater ...
            </div>
            <div class="col-12">

                <asp:Panel ID="panel_endiaferomenwn_provoli" runat="server">
                    <div class="table-responsive table-bordered">
                        <table style="min-width:950px; width:100%">
                            <tr>
                               ... table contents ...
                            </table>
                        </div>

                    <asp:Repeater ID="rep_all" runat="server" DataSourceID="data_rep" OnPreRender="rep_all_PreRender">
                        <ItemTemplate>
                            <div class="table-responsive table-bordered">
                                <table style="min-width:950px; width:100%;">
                                    <tbody>
                                         ... details and data binding ...
                                    </tbody>
                                </table>
                            </div>

                        </ItemTemplate>
                    </asp:Repeater>

                    <asp:SqlDataSource ID="data_rep" runat="server" (connection details)></asp:SqlDataSource>
                </asp:Panel>


            </div>  

        </div>  

    </div>

</div>

Answer №2

To preserve the layout, utilize the "display-flex" style. Place it within a parent division with columns and subdivisions. Append "col-6" or similar to that div (You can use "col-12" for the parent). This will keep your formatting intact. Enjoy coding! :)

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

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

Guide on customizing Bootstrap 4.5 SASS variables and incorporating them into SCSS files

Recently, I made the decision to transition all of my CSS files into SCSS in order to leverage Bootstrap 4.5 theming for styling purposes. Initially, I managed to get some aspects working correctly, but encountered issues after switching from CSS to SCSS a ...

Discovering the true width of an element using JavaScript

Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...

Having trouble updating the value in the toolbar?

Here is an example that I added below: When I click the add button, the value of the "newarray" variable is updated but not reflected. I am unsure how to resolve this issue. This function is used to add new objects: export class AppComponent { ne ...

Animating the change of background image position in jQuery

Struggling to change the background image position in jQuery animation? Need some assistance to troubleshoot it? Here is the code you are working with: CSS #pnav a{ background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Ticket ...

Incorporate a genre twist in animated films

Is there a way to implement an animated feature where the letters appear one by one in between a sentence, similar to what is seen on this page? On the linked page, there is a sentence displayed inside a banner that reads: Create meaningful documents Cr ...

How can I make sure my rows are properly aligned using the Grid

Looking at the image below, I am attempting to align "Ticket Number" and "Email" using a Grid: View My Result Image <Grid container direction="row" justifyContent="flex-start" alignItems="stretch" style={{ pad ...

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

Learn how to connect a formArray from the parent component to the child component in Angular with reactive forms, allowing you to easily modify the values within the formArray

In my parent component, there is a reactive form with controls and a form group. When the user selects a playerType from a dropdown menu, I dynamically add a formArray to the formGroup. This form array will contain either 2 or 3 form groups based on the p ...

Issue where the background color remains the same and does not change

I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS: body { background-color: black; padding: 0px; margin:0px; height: 1500px; } However, it doesn't seem to ...

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: https://i.sstatic.net/kzJtF.png My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); ...

What is the reason for CSS being implemented exclusively on my master page?

I have a link to an external CSS file in the head section of my Master page. <link href="style.css" rel="stylesheet" type="text/css" /> Although I can apply the style in child pages during design time... <asp:Label ID="Label" runat="server" Css ...

What is the best way to choose and deselect a checkbox in Angular?

I'm currently working on an angular Todo list project where I'm tackling the challenge of implementing a select all and unselect all checkbox feature. todo.ts import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core&ap ...

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

Alter the color scheme of the website depending on the information provided by the user on the previous page

On the previous page, I have created a form with a checklist containing options for colors: red, green, and blue. If the user selects red, the background color on the next page should change to red. If green is selected, the background color will be green ...

Customize Vue Element UI table cell appearance depending on the data

I am utilizing Element UI for my project. How can I dynamically change the color of the rate cell value in the table? I want the color to be red when rate is less than 0, and green when it is greater than or equal to 0. I wonder if the table attribute cel ...

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

Determine if a user has made any spelling errors within an HTML textarea using spellcheck

I am working with a textarea that has the following definition: <textarea spellcheck="true"></textarea> As users type, spelling mistakes are highlighted (such as with a red underline in my browser). Is there a way, possibly using jQuery, to v ...