dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: P text bleeding out of bootstrap .form-control container but not in jsFiddle

  1. #1
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    88

    P text bleeding out of bootstrap .form-control container but not in jsFiddle

    I have a strange situation here. The following Bootstrap3 based code looks fine in jsFiddle, but not when running anywhere else. As you can see from the links provided, the p text bleeds out of it's tag on my server, but looks fine in jsFiddle (both using bootstrap3).

    Screenshot comparison: https://i.stack.imgur.com/HBiHP.png
    Here it is on my server: http://leke.ydns.eu/ac2/

    Any idea what could be causing this? Thanks.

    Code:
    HTML Code:
    <form action="">
        <div class="row"><div class="col-sm-12">
            <h4>Step 1:</h4>
        </div></div>
        <div class="row"><div class="col-sm-12">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <p class="form-control">Long description text text text text text text text text text text text text text text text...</p>
                </div>
            </div>
        </div></div>
    </form>

  2. #2
    Join Date
    Jun 2014
    Posts
    4
    Please also give a link to the fiddle.
    The problem on your page is that Bootstrap sets the height to 34px in the class .form-control.


  3. #3
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    88
    Quote Originally Posted by マルコ View Post
    Please also give a link to the fiddle.
    The problem on your page is that Bootstrap sets the height to 34px in the class .form-control.
    Hi, thanks fir the info. Here is link: http://jsfiddle.net/n2fole00/6JyFr/4/

  4. #4
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    88
    So based on the information suggested above, I just overrided the .form-control height property like so...

    HTML Code:
    .form-control {
        height: auto;
    }
    Seems to work

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles