Handlebars.js: Dynamic td width while creating table

Created on 23 Apr 2018 · 7Comments · Source: handlebars-lang/handlebars.js

I am creating a table which includes two rows with dynamic numbers of td.
The important part is to set the width for each td and the width has been calculated and passed to view.
tdWidth: 100/numberOfChars => which gives a percentage for width
I am using following code but it is not working:

<table>
<tbody>
<tr>
{{#each array}}
<td style='width: {{tdWidth}}%;'>{{this}}</td>
{{/each}}
</tr>
</tbody>
</table>

any helps appreciated.

Source

amirzandi

Most helpful comment

You're iterating in "corrects" in your "each" statement, but that object doesn't hold the "tdWidth" object.

I think you may need to change this:
{{tdWidth}}

To this:
{{../tdWidth}}

Ref: http://handlebarsjs.com/ (under "Handlebars Paths")

magikstm on 24 Apr 2018

👍2 🎉1

All 7 comments

@nknapp please help!

amirzandi on 24 Apr 2018

What issue are you currently having?

More code would be needed to help resolve the issue.

magikstm on 24 Apr 2018

@magikstm actually tdWidth comes from server but it is not being rendered in client. while I check the source on client, it shows:
c
but when I display tdWidth inside a span or div, it shows: 9.99 which means data is coming from server. It is not working while I place it inside the style tag of an element.

amirzandi on 24 Apr 2018

@amirzandi could you please share more of your code?

Especially the part that creates the "tdWidth" value as well as how you link it to that part of your page.

magikstm on 24 Apr 2018

@magikstm
this is the server side:
res.render('./game/phrase_box', {
layout: false,
incorrects: result.incorrects,
corrects: result.corrects,
numberOfChars: result.numberOfChars,
tdWidth: 100 / numberOfChars
});

this is the client side:
{{#if incorrects}}
{{#if corrects}}

            <tr>
                {{#each corrects}}
                    <td style="width:{{tdWidth}}%">{{this}}</td>
                {{/each}}
            </tr>
        </tbody>
    </table>
{{/if}}

amirzandi on 24 Apr 2018

You're iterating in "corrects" in your "each" statement, but that object doesn't hold the "tdWidth" object.

I think you may need to change this:
{{tdWidth}}

To this:
{{../tdWidth}}

Ref: http://handlebarsjs.com/ (under "Handlebars Paths")

magikstm on 24 Apr 2018

👍2 🎉1

@magikstm ohhhhh you saved my day.... thank you very much... thanks a lot.

amirzandi on 24 Apr 2018

🎉1 👍1

Was this page helpful?

0 / 5 - 0 ratings