Issue with the alignment of form input fields and buttons in Mozilla Firefox

Fixing Form Field Alignment Issue in Firefox

After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to more refined cross-platform solutions.


The issue resembled another question on Stack Overflow: How can I align my checkbox with CSS. However, the discrepancy lies in Chrome vs. Firefox behavior.

A brief overview of the code:

  • Utilizing Symfony 2 form builder
  • Incorporating Bootstrap with Custom Less/CSS Styling
  • Rendering via Twig/HTML

Initially, I explored flexbox styling as a potential fix, but after experimenting with different approaches without success, I opted for a simpler albeit effective solution instead.

Recreating the exact problem scenario may prove challenging; hence, I will share a snippet from the .html.twig file:

 {{ form_start(form) }}
    {{ form_errors(form) }}
    {{ form_row(form.id) }}
    {{ form_row(form.embedded) }}
    <div class="row">
        <div class="col-xs-12"><label id="subformHeader">Field(s)</label></div>
    </div>
    <ul id="sortable" class="fields subform" data-prototype="{{ form_widget(form.fields.vars.prototype)|e }}">
        {% for key, field in form.fields %}
                <li>
                    <span class="glyphicon glyphicon-sort"></span>
                    {{ form_row(field.name) }}{{ form_row(field.type) }}{{ form_row(field.options) }}
                </li>
        {% endfor %}
    </ul>
    <div class="btn-toolbar">
        <input type="submit" value="Save" class="btn btn-primary pull-left" />
        {% if id %}
        <a class="btn btn-warning pull-left" id="delete" href="?delete=y&id={{id}}">Delete</a>
        <a href="{{path('path_to_data')}}" class="btn btn-warning pull-left" id="reset">Reset</a>
        {% endif %}
    </div>
{{ form_end(form) }}

Below is a glimpse of the CSS/Less employed:

.subform {
 list-style: none;
 li {
    div {
        display: inline-block;

        label {
            display: none;
        }
     }
     .deleteLink, .fieldOptions {
        margin-left: 4px;
     }
 }
 li:first-child div label {
    display: inline;
 }
}

Answer №1

Here is the solution I crafted...

.subform {
 list-style: none;
 li {
    div {
        display: inline-block;

        label {
            display: none;
        }
        .form-group {
        box-sizing: border-box;
        vertical-align: bottom;
        }
     }
     span {
         vertical-align: 150%;
     }
     a {
        vertical-align: 110%;
     }
     span.glyphicon-option-horizontal,span.glyphicon-minus {
        vertical-align: -7%;
     }
     .deleteLink, .fieldOptions {
        margin-left: 4px;
     }
 }
 li:first-child div label {
    display: inline;
 }
}

This adjustment brought everything into alignment after some experimentation:

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

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

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

When using Javascript's querySelector, often times it returns null

Here is the HTML code I am working with: <button class="pop-btn"> Pop </button> While I was able to style this button using CSS, I encountered a problem when trying to select it in Javascript: const Population_div_Button=document. ...

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

What is the best way to stylize a date using Bootstrap-datepicker?

While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn ...

Issue with Responsive Behavior of Multi-Row Cards in Bootstrap 4

My goal is to create responsive rows of cards with some margin, but I am running into issues. When I use margin:5px; on my cards, the row overflows and they are not centered correctly. There seems to be extra space on the right side of the cards. How can I ...

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

Is there a way to customize the CSS for a single blog post and add a 5-star rating system without affecting other posts?

After launching my blog on Google's Blogger, I wanted to add a unique touch by incorporating a static 5-star rating system in my Books I Read Section. I thought about using CSS to customize each book post and display anywhere from 1 to 5 stars for vis ...

Unexpected Placement of CSS Grid Items

I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in colu ...

Is it advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

The alignment of the image background is malfunctioning on the iPad 3 device

Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML cod ...

Issue with fullcalendar: difficulty displaying events using ajax after clicking 'previous' or 'next' button

I am currently working on creating a calendar using fullcalendar. To retrieve data for the month, I make an external ajax request. Here are the key variables I utilize to render the fullcalendar: eventsJsonArray - used to load all events for the month ...

"Customize Bootstrap layout to have a stable width for desktop screens and a flexible width for

I received a psd design with a background for html5-bootstrap development that needed to be responsive. The original psd had a width of over 1200px, with the main container around 900px wide and the background displaying correctly. When converting to HTML ...

Vertical alignment is somewhat functioning but not completely

Could someone help me figure out why my green DIV is not vertically aligned in the middle of the red DIV and suggest a solution? Thank you! Link to JSFiddle .wrapper-alt { margin-right: auto; margin-left: auto; width: 980px; display:tab ...