• 5
name

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191

Backtrace:

File: /home/prodcxja/public_html/questions/application/views/question.php
Line: 191
Function: _error_handler

File: /home/prodcxja/public_html/questions/application/controllers/Questions.php
Line: 433
Function: view

File: /home/prodcxja/public_html/questions/index.php
Line: 315
Function: require_once

I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.

I have the following code :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <div class="span1">
            <input type="hidden" name="tracking_id" value="" />
        </div>
    </div>
</div>

This code work well and the result is what I expected.

If I do this :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">

        </div>
    </div>
</div>

The layout is not respected. See this picture for the demostration :

enter image description here

Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?

jsfiddle : http://jsfiddle.net/t9M3C/

Near line 285

    • @JoshMein I wanted to but I don't know how to keep my layout and stuff... ? That why I uploaded a picture.
    • Are you sure that that is all you are changing? It "shouldn't" make a difference. What browser are you viewing it in? Have you tried a different browser to see if it has the same effect?
      • 2
    • @Gravitate Yes, I am sure. I can recreate the error just by moving the input... Google Chrome last version 21.0.1180.77 m.
      • 2
    • @DavidBélanger If you include your css in the fiddle, you should have no problem recreating the issue, and maybe in the process you will find your real issue.

Is because you have a css rule (in bootstrap.min.css file) that match the firs-child element (but only if has a class*="span") inside the default_shipping_box div.

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

So, if you put your hidden input inside the div#default_shipping_box and before the first span, then that rule is not styling the div.span1 and thats why your template is been afected.

You can fixed adding a simple css rule to the same file...

.row-fluid .span1{margin-left:0 !important;}

The important, is because you have more files who overite this rule (ex. in bootstrap-responsive.min.css)

Good luck, and i hope it helps cheers, Gmo.-

EDIT: Too slow XD. Answered while writing ... I agree with the reason explained above.

  • 6
Reply Report

Using Google Chrome's Inspest Plugin, when you move the input this class:

.row-fluid [class*="span"]:first-child {
     margin-left: 0;
}

Gets removed.

This is because in this:

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">
        </div>
    </div>
</div>

This : <div class="span1"> is not the first child, this: <input type="hidden" name="tracking_id" value="" /> is.

and in your CSS this is that default class for [class*="span"] is:

[class*="span"] {
    float: left;
    margin-left: 30px;
}

So use this for example :

.row-fluid .span1 {
    margin-left:0 !important;
}

Hope this helps.

  • 6
Reply Report

Bootstrap has some CSS that will set the left-margin of the first of the child to 0, if the class contains span:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }

When the hidden input is put above the first span div, the above margin-left: 0; property will not be applied.

The following image shows that when the hidden input is before, then the first span class has a left-margin.

Hidden input above DIV

This shows that when the hidden input is after the div, that there is no left-margin.

Hidden below above DIV

EDIT: I seem to have a been beaten twice, while I was getting the screenshots to illustrate the difference!

  • 3
Reply Report

Warm tip !!!

This article is reproduced from Stack Exchange / Stack Overflow, please click

Trending Tags

Related Questions