What steps can I take to identify the source of the spacing problem in my CSS and bootstrap?

I'm having trouble with certain CSS elements not rendering correctly on my Bootstrap v5.3 form.

For some reason, most of the rows on my page have a small purple rectangle in front of them:

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

The presence of this rectangle is consistent across the display, but I'm unsure why it appears.

When I enter my Razor code to loop through and display phone numbers, the purple spacer disappears and the alignment with other rows gets disrupted:

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

In the Inspector code, both DIV tags contain the same information, yet the second one lacks the rectangular area.

I'd like to resolve this issue, but since I don't understand why it occurs in the first place, I'm uncertain how to recreate it when it doesn't happen.

In site.css:

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
...

In Account.razor:

@page "/Account/{appid:long}"
@inherits BaseAppState

<PageTitle>@_title</PageTitle>
    <h3>@_title</h3>
<style>
...

Is there anyone who can assist me with this issue?

cssbootstrap-5

Answer №1

The root of the problem was traced back to the Bootstrap auto feature, specifically in its usage within col-auto, col, and col-md-auto.

Here is the problematic code snippet:

<div class="row justify-content-center">
    <div class="col-auto offset-md-1">
        @if (_data.PhoneNumbers.Count < 3)
        {
            <button type="button" class="btn btn-secondary" @onclick="@(() => AddPhoneNumber())">Add Phone Number</button>
        }
    </div>
    <div class="col"></div>
</div>
<div class="row justify-content-center">
    <div class="col-md-2 offset-md-1"></div>
    <div class="col-md-auto">
        <input type="submit" value="Continue" class="btn btn-am-primary @_buttonSuccessCss" />
    </div>
    <div class="col-md-2"></div>
</div>

After some troubleshooting, the issue was resolved by correcting the code as follows:

<div class="row justify-content-center">
    <div class="col-md-10 offset-md-1">
        @if (_data.PhoneNumbers.Count < 3)
        {
            <button type="button" class="btn btn-secondary" @onclick="@(() => AddPhoneNumber())">Add Phone Number</button>
        }
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-md-2 offset-md-1"></div>
    <div class="col-md-3">
        <input type="submit" value="Continue" class="btn btn-am-primary @_buttonSuccessCss" />
    </div>
    <div class="col-md-5"></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

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Hey there! I'm currently managing a php website that functions as an accounting system. Within this system, there are receipts, invoices, and other forms of documentation in use. However, I've encountered a problem with the main table in my myS ...

javascriptphphtmlmysqlcss

Utilize JavaScript to load an external script at the bottom of the body for improved website performance

On my website, I am utilizing the Mobile ESP script to determine whether visitors are accessing it from a mobile device or desktop. Depending on the type of device, I dynamically load the necessary scripts and CSS stylesheets for optimal navigation. Howev ...

javascriptjqueryhtmlcss

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

javascriptjqueryhtmlcssblogger

Issue with IE 8 compatibility and jquery

Here is the setup of my div: <div class="container"> <div id="myid" style="display:hidden;"> <p>some stuff here</p></div> </div> When I run the command $("myid").slideToggle("slow"); on the above html code (where " ...

jqueryhtmlcss

Guide on using an image as a background in a <svg> element with React.js

I am facing an issue with filling an SVG path with a background image. I have tried various methods found on Google, but none seem to work as expected. Here is the code snippet I have been working with: <div className="intro"> ...

htmlcssreactjssvg

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

Challenges with text wrapping in a continuously scrolling container in CSS

I am currently developing a project that requires infinite horizontal scrolling for cells containing thumbnails and text. While most of the functionality is in place, I am facing an issue with text wrapping. The CSS and HTML code are provided below. The fi ...

htmlcss

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

Achieve equal height for two v-flex sections placed side by side in Vuetify framework

desired appearance: https://i.sstatic.net/aPrrP.png current appearance: https://i.sstatic.net/JNH2W.png In an attempt to ensure two tables have a consistent and responsive height using Vuetify features, I have implemented the following code: <templa ...

htmlcssvue.jsfrontendvuetify.js

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

What impact does including tab index in the <a> tag have on the :focus functionality in Chrome?

Exploring the following scenario: <a tabindex="0" href="">With TabIndex</a> <a href="">Without TabIndex</a> https://jsfiddle.net/uLg7jyo9/1/ Click on the first link, move away and release the mouse, observe that the blue border ...

htmlcssgoogle-chromehyperlinktabindex

The mobile menu in bootstrap is stationary while the background scrolls instead of the menu

I recently completed a website using Bootstrap, and everything seems to be working well on desktop. However, I am facing an issue when loading the site on mobile devices. The menu is not scrolling properly when opened, making it difficult to view all the o ...

htmlcssbootstrap-4menutoggle

Problem with top navigation not behaving correctly when set as fixed at the top

I encountered a strange issue with the sticky top navigation bar on my website. You can view the problem by visiting this link to the fiddle code and I've included the relevant details below. There are three specific areas where the problem arises: ...

htmljquerycss

The text does not automatically move to the next line

How can I make the content in this form section wrap to the next line in a list-item and overlap the width of the div content? The second line, particularly where it mentions Security Question two https://i.sstatic.net/5CVi2.png This is my HTML & CS ...

htmlcss

Adding a class to an element without using an ID or existing class in JavaScript

Just starting out... :) I'm working on this code snippet: <div class="menu"> <ul> <li></li> ... </ul> </div> I want to add the class "nav" to the <ul> element so it looks like ...

javascripthtmlcss

What is the best way to hide my rectangle in HTML?

Just starting out with Wix for my website. I have a block of HTML code that creates a blue rectangle, but I want it to disappear automatically after 30 seconds. What additional code do I need to achieve this effect? Also, is there any unnecessary code I c ...

javascriptjqueryhtmlcss

How can I address the issue of an inner content scroll bar?

I am facing an issue with the scroll bar on inner content. When I hover over an arrow on the inner content, the scroll bar appears as desired. However, it changes the content in a way that looks odd. Is there a solution to have a scroll bar on the inner co ...

javascriptjqueryhtmlcss

Enhanced Organic Draping/Drifting

Currently working on creating a basic thumbnail gallery where clicking on a thumbnail expands it to one of three sizes (square, vertical, or horizontal). However, facing the issue where expanded pictures maintain their original order instead of filling emp ...

jqueryhtmlcsscss-floatword-wrap

Looking for assistance in arranging 3 divs next to each other

I'm looking to align three divs side by side, but I can't seem to get them to line up correctly. I've tried using simple CSS, but it's not working as expected. Any help would be greatly appreciated. Additionally, I want these divs to a ...

csshtmlcss-floatwidth

Do elements automatically adapt size in different browsers?

I'm currently designing a website at www.50s.co and everything seems to be working fine in Chrome. However, when I check it in Firefox or IE, the background images appear to be sized differently. Even though the image sizes are supposed to be the same ...

htmlcssbrowserwebcompatibility