How do I resolve the layout issue caused by Chrome's behavior?

I'm encountering some problems with how elements are being displayed in Google Chrome. Interestingly, when I check the code in Firefox or Edge, everything looks correct. It appears that Chrome is either calculating a smaller width for "col-sm-1" or it's not taking into account the padding.

This is the HTML code I have:

/*dropdown size*/

.dropdown-sm {
  font-size: 1.25rem;
}
.
.
.(CSS code continues)

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>
.
.
.(HTML code continues)

While both Firefox and Edge display the elements correctly:

Chrome seems to be disrupting the layout:

How can I resolve these layout issues specifically for Chrome?

csstwitter-bootstrapgoogle-chrometwitter-bootstrap-3

Answer №1

Examined your code in both Firefox and Chrome and noticed that the layout remains consistent across both browsers.

However, I did notice discrepancies in size when comparing to your screenshot.

My hypothesis is that there may be varying zoom levels configured within your individual browsers. I recommend verifying that both are set to 100%.

Answer №2

To prevent layout issues in Chrome, include a min-width for col-sm-1 and col-sm2.

Integrate new classes into HTML: dropdown-container and button-container

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>

<body>
  <main role="main">
    <div id="boottom-page" class="container-fluid">
      <div class="row">
        <div class="col-sm-1 dropdown-container">
          <span class="custom-dropdown dropdown-sm">
              <select data-name="change-role">
                  <option>Change role to...</option>
                  <option>User</option>
                  <option>Author</option>
                  <option>Admin</option>
              </select>
          </span>
        </div>
        <div class="col-sm-2 button-container">
          <div>
            <div>
              <button type="button" class="btn btn-info">Change </button>
              <button type="button" class="btn btn-info">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

CSS

.dropdown-container {
  min-width: 130px;
}

.button-container {
  min-width: 230px;
}

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

Troubleshooting Issue: Chrome DevTools malfunction when interacting with the Select element

Currently, I am in the process of updating a website's mobile device style sheet and utilizing the built-in DevTools within Chrome for testing. I'm working with Chrome version 53.0.2785.116 on a Windows OS. The issue I am facing is that when usi ...

htmlcss

What is the best way to create a hover effect exclusively for the hamburger icon, and not for the close button

I am facing an issue with the code snippet below: .btn-menu:hover .btn-menu__bars::before{ transform: translateY(-0.5875rem); } .btn-menu:hover .btn-menu__bars::after{ transform: translateY(0.5875rem); } Is there a way to make this hover effect only a ...

htmlcss

"Utilize jQuery to load a file when hovering over a specific

How can I dynamically load an external file using jQuery when a user hovers over a specific div? I attempted to load the file like a CSS file on hover but was unsuccessful. Is it possible to load a CSS file on hover as I've seen in some examples? $(d ...

javascriptjquerycss

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

cssreactjsantd

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework

What is the best way to center text vertically in a <div> using CSS?

This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...

htmlcssgoogle-chromegoogle-chrome-extension

Create a unique SVG path by eliminating any overlapping shapes directly within the code

I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross. Is there a way to modify the code to eli ...

csssvgvector-graphics

Styling the nested list items with text decoration

I have a scenario where I applied text-decoration: underline; to the parent li, which is being inherited by the child li. Despite trying to remove this style from the child elements using text-decoration: none !important;, it doesn't seem to work. The ...

htmlcsshtml-lists

Relocate the Bootstrap selector box form to align with the left side of the page

I have included the Bootstrap CDN in my project, and I am encountering an issue with a form that contains a dropdown box. The problem is that the legend tag is properly aligned to the left of the page, but the selector box is slightly indented towards th ...

cssbootstrap-4

Certain CSS styles for components are missing from the current build

After building my Vue/Nuxt app, I noticed that certain component styles are not being applied. In the DEVELOPMENT environment, the styles appear as expected. However, once deployed, they seem to disappear. All other component styles render properly. Dev ...

javascriptcssvue.jsnuxt.js

user1234: I'm interested in decreasing the amount of items shown on the screen when it's smaller

Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess ...

htmlcssbootstrap-5

Ways to make the height of two div elements the same using CSS

I need to ensure that the height of two div's is equal, with one stretching to match the height of the other if necessary. I am looking for a solution using only CSS. Here is the code I have so far (Fiddle Link): HTML: <div class="common"> ...

htmlcss

Concealing HTML content with a modal overlay

There are security concerns with my authentication overlay modal, especially for users familiar with CSS and HTML. Is there a way to hide the HTML behind the modal so it doesn't appear in the page source? The code below is just an example of a modal ...

javascriptjqueryhtmlcss

What is the CSS method for styling a color label on an active input box?

I am trying to achieve a specific effect where the label changes color when the input box is in focus. However, my current CSS code does not seem to be working as expected. Can someone please explain why and provide a solution to fix this issue? .test-l ...

htmlcss

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: https://i.sstatic.net/oq0jA.png small: https://i.sstatic.net/WXqmV.png When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least ...

htmlcsssvgflexboxcss-grid

Is there a way to access jQuery pages from a user script?

I am interested in creating a brief userscript for a webpage that already has jQuery. I have no trouble accessing the $ object from the Chrome developer console, but when trying to access it from the user script, I receive an error message stating that jQu ...

javascriptjquerygoogle-chromeuserscripts

Clickable label for checkbox in Android browser is unresponsive

I've been experimenting with creating a responsive CSS menu using the checkbox hack Here's the HTML: <input type="checkbox" id="button" /> <label for="button" onclick>click / touch</label> <div> Change my color! </d ...

javascriptandroidjqueryhtmlcss

I am experiencing some trouble with configuring the CoreUI Admin Template

I've encountered an issue where I've tried various methods to implement this theme but haven't had any success. 1. I followed the steps in the documentation by cloning the repo of the template and then using npm install (npm run serve) -> ...

csslaravelnpmcore-ui

Adjust a CSS variable with a simple click

I have a challenge where I want to double the value of an element's property every time it is clicked, using CSS variables. Here's what I have tried: #circle_1 { width:50px; height:50px; width: var(--size_1, 50px); heig ...

javascriptcsscss-variables

Compatibility of Bootstrap 4 with collapsible elements and display utilities

I have noticed an issue with Bootstrap 4 display utilities not functioning properly with the .collapse class, a feature that worked seamlessly with Bootstrap 3. Despite my efforts to research this problem, I have been unable to find similar inquiries regar ...

htmlcssbootstrap-4display