Twitter Bootstrap Question posted in

Twitter bootstrap – PHP: No space between html tags when rendered from single <?php?>

this is a curious question, and I would like to know why it happens..

I am using Yii2 framework and I created a widget to render a thumbnail from Twitter bootstrap, I have made the code to render multiple buttons if it was needed, but when I render more than 1 buttons, they seem to not be any space between each other, I checked the HTML code and it seems to be fine, I even compared the view with 2 same codes, one from PHP and another from just HTML,

this is how it looks, both have same HTML code, but the first one is rendered from PHP
enter image description here

this is how the HTML code is, both cases have the same code, the difference is that the first one comes from php

<div class="thumbnail">
    <div class="caption">
        <h3>testing</h3>
        <p>Lorem ipsum dolor</p>
        <p>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
        </p>
    </div>
</div>

<div class="thumbnail">
    <div class="caption">
        <h3>testing</h3>
        <p>Lorem ipsum dolor</p>
        <p>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
        </p>
    </div>
</div>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    This is fixed by adding regex between each element

    for example we have multiple elements being processed in a foreach loop in php and the result is concatenated in a string

    <?php 

function createButtons($data)
{
    /**
     * [$html Here is where the html buttons are going to be stored]
     * @var string
     */
    $html = '';

    /**
     * This will generate Html Button for each element in the array and concatenate into $html as string like this:
     * <button><button><button><button>
     */
    foreach($data as $button)
        $html .= Html::Button($data['name'], $data['options']);

    return $html;
}

    in order to make make it create a new line for each element, a "n" which is a regex code to add a new line

    <?php 

function createButtons($data)
{
    /**
     * [$html Here is where the html buttons are going to be stored]
     * @var string
     */
    $html = '';

    /**
     * This will generate Html Button for each element in the array and concatenate into $html as string like this:
     * <button>
     * <button>
     */
    foreach($data as $button)
        $html .= Html::Button($data['name'], $data['options'])."n"; //This "n" adds a new line in the string

    return $html;
}

  2. 0

    I had a similar issue. Try to insert html comments between the buttons because spaces have width also.
    E.g.

    <input .... /><!--
--><input .... /><!--
--><input .... />
    Login or Signup to reply.
  3. 0

    I’m 90% sure this would be because of combination of css and the outputed html.

    If you have for the button element css style: display: inline-block and there is at least one space between the html tags you’ll get the spaces (new lines also count)
    with: space

     <button>foo</button>
 <button>bar</button>

    without space 

     <button>foo</button><button>bar</button>

    the reason why with php its withou spaces is probably because during the rendering there is stripping of white space occuring

    Also if the posted code is from inspecting the code with chrome or whatever, its not the real code structure its formated. try looking at right-click -> source code

    if you want to fix it.

    it could be solved by:

    • changing your css for the element to display: block; float: left -> making it block element with flaots.

    • changing your css to for using display: flex – google this if you don’t know it.

    • removing spaces between html tags / minify html – and keep display: inline-block

    Login or Signup to reply.
  4. 0

    Php cancels out white spaces by default. You can however tell it to add white spaces by using &nbsp.

    This is the syntax:
    echo str_repeat(‘ ‘,1);

    The first argument will add whitespace, the second argument is how much space you want to add

    You can put it after echoing your button

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search