5

I have been using text-align: justify to evenly distribute menus. Following this tutorial and it is working perfectly.

However, it breaks when I use ReactJS to create the view. A comparison can be found here: http://jsfiddle.net/j7pLprza/1/. I use these two simple components to populate the menus:

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return (<MenuItem title={menu.title} />);
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

After exploration, I think it is caused by ReactJS, which removes all line-break and white-space after <li> items. This will disable text-align: justify.

It happens for AngularJS as well (but I can fix it by using a add-space-all directive).

I reached only this issue after googling: https://github.com/facebook/jsx/issues/19. But I quickly got lost.

I tried to add some extra content, such as {'\n'} and {' '}, but ReactJS reports syntax errors.

Please help. Thanks.

UPDATE 1:

Following the accepted answer, my menus works in Chrome Emulator. However, when I visit from iPhone 5c (Chrome browser), the result is as if the extra space is not recognized.

After trying different combinations, this one works:

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [(<MenuItem title={menu.title} />), '&nbsp; '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Please be noted that the extra space in &nbsp; is necessary. Missing either &nbsp; or breaks it.

It works then on Nexus 7, iPhone 5c (Chrome and Safari). However, I do not know the exact reason. If anyone knows, please help.

UPDATE 2:

Still buggy. So I switched to Flex layout. And it is super easy. An example is: http://jsfiddle.net/j7pLprza/4/

Joy
  • 9,430
  • 11
  • 44
  • 95
  • 1
    React doesn't remove anything in this case, since there is no whitespace between elements in the first place. If you want to add whitespaces between the li elements, you can interleave the array with `' '`. Example: http://jsfiddle.net/j7pLprza/2/ – Felix Kling Apr 16 '15 at 09:59
  • Thanks, @FelixKling. It works!. Please put it in the answer. – Joy Apr 16 '15 at 10:19
  • I didn't answer because it's a bit annoying from an iPad. However, it turns out it works quite well with StackExchange app :) – Felix Kling Apr 16 '15 at 10:27
  • @ShaojiangCai could you provide the solution you found with flex layout? – HelpMeStackOverflowMyOnlyHope May 04 '15 at 03:58
  • 1
    @HelpMeStackOverflowMyOnlyHope Please check it out: http://jsfiddle.net/j7pLprza/4/ – Joy May 04 '15 at 06:02

1 Answers1

9

React doesn't remove anything in this case, since there is no whitespace between elements in the first place. If you want to add whitespaces between the li elements, you can interleave the array with ' '. In this case it is as simple as returning an array from the .map function (arrays are flattened):

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [<MenuItem title={menu.title} />, ' '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Example: https://jsfiddle.net/j7pLprza/2

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • So without whitespace between them, all `li` together will be considered as a single "word" thats clubbed together? – sabithpocker Apr 16 '15 at 11:30
  • Hi, @FelixKling. The code is working well on Chrome Emulator, but not working when I visit from a real iPhone 5, where the `justify` seems not making any affect. I tried to visit the JSFiddle you provided and it is fine (from my iPhone). Now I am afraid I miss something. Could you please provide any pointers about this problem? – Joy Apr 16 '15 at 11:39
  • @ShaojiangCai notice `, ' '` in the end. More info here: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly – Dmitry Polushkin Jun 04 '15 at 14:00