The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout.

If the hidden input is moved into div.span6 or removed altogether, everything functions as expected. However, leaving it there causes the rows to collapse and not display properly. Ideally, they should be positioned next to each other, not stacked on top of one another.

Fiddle: http://jsfiddle.net/EZMvB/

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <input type="hidden" name="WAT" value="WAT" />
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
    </form>
</div>

htmlcsstwitter-bootstrapgrid

Answer №1

It is generally not recommended to use the row-fluid class within a <form> tag, as it often results in only one row being displayed when you may need more rows in your code.

You can see an example of this issue in this jsFiddle link

Here is the code snippet:

<form action="/admin/category/create"  method="post" novalidate="novalidate">
    <input type="hidden" />
    <div class="row-fluid" >
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" data-val="true" data-val-required="'Name English' should not be empty." id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
             <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
   </div>
</form>

Answer №2

After some testing, it appears to function correctly when the hidden field is relocated (http://jsfiddle.net/EZMvB/1/). It's unclear why the positioning is significant since the default display: none should prevent any impact on the layout.

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
        <input type="hidden" name="WAT" value="WAT" />
    </form>
</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

Having trouble grasping the display property combination in Bootstrap4

Incorporating Bootstrap4 into my web application, I am faced with the task of displaying a menu exclusively on the large screen size setting (lg). The guidelines are straightforward: utilize a class to conceal an element across all screen sizes: .d-none ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Issue with the left margin of the background image

I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected ...

htmlcssbackground

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

data-abide is flagging all fields as incorrect

Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...

htmlruby-on-railsrubyzurb-foundation

Navigating the web page and locating the appropriate Xpath element to extract

Here is the HTML that needs to be extracted: <input type="hidden" id="continueTo" name="continueTo" value="/oauth2/authz/?response_type=code&client_id=localoauth20&redirect_uri=http%3A%2F%2Fbg-sip-activemq%3A8080%2Fjbpm-console%2Foauth20Callbac ...

htmlregexseleniumxpathselenium-webdriver

My lists are not being styled by Embedded and Internal CSS

I want the ingredients list to be styled in green, equipment list in red, and method list in blue using different CSS techniques. My external works fine for changing the color to red, but my internal styles don't seem to apply to the other lists. < ...

htmlcsshtml-lists

Performing two ajax calls within a non-existent div that has only just been appended

I've been developing a website similar to 9gag. I attempted to incorporate a voting feature created by someone else, as I'm not well-versed in AJAX requests, but it just doesn't seem to be functioning. My index.php file fetches five posts f ...

javascriptphpjqueryhtmlajax

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

What is causing my AJAX Contact Form to navigate away from the original page?

I configured a contact form on my website more than 5 years ago, and I vividly remember that it used to show error/success messages directly on the page within the #form-messages div. However, recently, instead of staying on the contact form page and displ ...

javascriptphphtmljqueryajax

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

Using jQuery to temporarily disable a div element

I need to implement a timer in a div that will disable it for a specific duration, such as 3 seconds. Here is the HTML code snippet: <div class="answ-container" align="center"> <div class="c_answer" id="1316" name="1" data-rcat-no="1"> ...

jquerycsshtml

What are the steps to apply material-ui's error-themed style (color) to non-form text?

When it comes to using error styles for form inputs like text fields, the documentation is straightforward. But what about applying the same style to a custom element, such as a text label for a file upload button or another unique component that doesn&apo ...

cssreactjsmaterial-ui

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Passing a PHP array to a JavaScript function using a button click event in an HTML form

It seems there was some confusion in my approach. I'm working with a datatable that has an edit button at the end. Clicking on this button opens a modal, and I want to pass the data from the table to the modal. While I can send it as a single variabl ...

javascriptphphtmlarraysbootstrap-modal

Adjust words to fit any screen size as needed

Looking for a small program that can dynamically change a word within an SVG? The goal is to create an effect where regardless of the word or group of words, they always stretch along the entire height (due to a 90-degree rotation) by adjusting the font si ...

javascripthtmlsvg

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

htmlcsscss-position

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with: <form action="input.php" method="POST"> <input type="text" class="input" name="firstname" placeholder="First Name" required> <input t ...

javascripthtmlcssformsvalidation

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss