Controlling White Space

jhanley · June 10, 2020, 4:32pm

Hi,

I have some basic code that looks to provide a header, infotext and a comment box across three rows; however, I seem to be having trouble minimising white space between the rows:

Are you able to advise on whether it is possible for me to bring these rows closer together, ideally to obtain something like the below mock-up:

(Expand for code)

{% stripnewlines %}
{% assign title = 'Summary of Key Points and Activity In Year' %}
{% assign namespace = 'reviewandcompletion_keypoints' %}
{% assign infotext = 'Discuss key changes since prior year end, give a brief explanation of larger variances and explain any exceptional items affecting the results.' %}

{% comment %}
-----------------Header-----------------  {% endcomment %}
**{::font size="m"}{{ title }}{:/font}**
{% newline %}
{% ic %}{::infotext}{{ infotext }}{:/infotext}{% endic %}


{% comment %}
Table structure:
|<Comments>|<Check> {% endcomment %}

{% newline %}{% newline %}
|---92%----|:-8%-:+
{% newline %}
|{% input custom.[namespace].comments as:text size:mini placeholder:"Please input further information" %}
|{% if custom.[namespace].comments <> blank and custom.[namespace].vc_link <> blank %}
    {% assign check_ind = 0 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
  {% else %}
    {% assign check_ind = 1 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
  {% endif %}
{% endstripnewlines %}

Thanks,
Joe

simon_vds · June 11, 2020, 11:55am

Hi @jhanley ,

Thank you for your question!

You can eliminate the white space above the input field when you have all three rows within the same table. Note the added pipeline in front of the header and infotext in below solution:

{% assign title = 'Summary of Key Points and Activity In Year' %}
{% assign namespace = 'reviewandcompletion_keypoints' %}
{% assign infotext = 'Discuss key changes since prior year end, give a brief explanation of larger variances and explain any exceptional items affecting the results.' %}

{% stripnewlines %}
|---92%----
|:-8%-:+
{% newline %}
|**{::font size="m"}{{ title }}{:/font}**
{% newline %}
|{% ic %}{::infotext}{{ infotext }}{:/infotext}{% endic %}
{% newline %}
|{% input custom.[namespace].comments as:text size:mini placeholder:"Please input further information" %}
|{% if custom.[namespace].comments <> blank and custom.[namespace].vc_link <> blank %}
    {% assign check_ind = 0 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
  {% else %}
    {% assign check_ind = 1 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
  {% endif %}
{% endstripnewlines %}

Best regards,
Simon

jhanley · June 17, 2020, 8:58am

Hi @simon_vds,

Thanks for the quick response, this is looking a lot more like I was hoping!

I’m still struggling with white-space; however, this time between the updated code above and the table that’s immediately before this section. Here’s a screenshot to illustrate my issue:

I’m hoping to have a consistent spacing between each section, like with the areas under development, which I’ve so far been able to achieve with <br>{% newline %}{% newline %} after each table. However this doesn’t appear to be working between the first two sections.

I’ve tried adding in additional <br>'s or {% newline %}'s but this only seems to break the tables or create too much space. Is there a trick to creating white-space between tables so that I can ensure each section is consistent?

(Here's the code for the above image)

{% stripnewlines %}
================================================================================================================================================
REVIEW AND COMPLETION HEADING
================================================================================================================================================  
Heading to separate two key areas on template  {% endcomment %}

<br>{% newline %}{% newline %}
|{::font size="m"}Review and Completion{:/font}
{% newline %}
|-100%-+
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: KEY RATIOS
================================================================================================================================================  {% endcomment %}

{% assign title = 'Key Ratios' %}
{% assign array_key_ratios = "Gross profit margin (%);Net profit margin (%);Return on capital employed (%);Current ratio (x:1);Trade debtor days;Trade creditor days;Stock turnover days" | split:";" %}
{% assign array_key_ratios_key = "gross_profit;net_profit;roce;current_ratio;debtor_days;creditor_days;stock_days" | split:";"  %}


{% comment %}
Table structure:
|------------|<Current_Year>|<Prior_Year_1>|<Prior_Year_2>|----------
|<Ratio_Name>|<Result_1>----|<Result_2>----|<Result_3>----|<Comments>  {% endcomment %}

{% newline %}{% newline %}
**{::font size="m"}{{ title }}{:/font}**

{% newline %}{% newline %}
|**{{ title }}**
|**Current Year**
|**Prior Year**
|**Prior Year 2**
|**Comments**
{% newline %}
|-----30%----|-----12%------|----12%-----|------12%-------|---34%---+#

{% for key in array_key_ratios_key %}
{% newline %}
|{{ array_key_ratios[forloop.index0] }}
|{{ custom.[key].current_year }} *calc*
|{{ custom.[key].prior_year_1 }} *calc*
|{{ custom.[key].prior_year_2 }} *calc*
|{% input custom.[key].comments as:text size:mini placeholder:"" %}
{% endfor %}

{% fori ratio in custom.ratios %}
{% newline %}
|{% input ratio.name placeholder:"Custom ratio" %}
|{% input ratio.current_year placeholder:"" %}
|{% input ratio.prior_year_1 placeholder:"" %}
|{% input ratio.prior_year_2 placeholder:"" %}
|{% input ratio.comments as:text size:mini placeholder:"" %}
{% endfori %}

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: SUMMARY OF KEY POINTS
================================================================================================================================================  {% endcomment %}

{% assign title = 'Summary of Key Points and Activity In Year' %}
{% assign namespace = 'reviewandcompletion_keypoints' %}
{% assign infotext = 'Discuss key changes since prior year end, give a brief explanation of larger variances and explain any exceptional items affecting the results.' %}

{% comment %}
-----------------Header-----------------  {% endcomment %}
|---92%----
|:-8%-:+
{% newline %}
|**{::font size="m"}{{ title }}{:/font}**
{% newline %}
|{% ic %}{::infotext}{{ infotext }}{:/infotext}{% endic %}

{% comment %}
Table structure:
|<Comments>|<Check> {% endcomment %}
{% newline %}
|{% input custom.[namespace].comments as:text size:mini placeholder:"Please input further information" %}
|{% if custom.[namespace].comments <> blank and custom.[namespace].vc_link <> blank %}
    {% assign check_ind = 0 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
  {% else %}
    {% assign check_ind = 1 %}
    {% unexplained check_ind as:indicator %}
    {% $2+ check_ind %}
 {% endif %}

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: COSTS V BUDGET
================================================================================================================================================  {% endcomment %}

{% assign title = 'Costs v Budget' %}


**{::font size="m"}{{ title }}{:/font}**
{% newline %}
*Under development*

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: DISCUSSION POINTS
================================================================================================================================================  {% endcomment %}

{% assign title = 'Discussion Points' %}


**{::font size="m"}{{ title }}{:/font}**
{% newline %}
*Under development*

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: DISCLOSURE CHECKLIST
================================================================================================================================================  {% endcomment %}

{% assign title = 'Disclosure Checklist' %}


**{::font size="m"}{{ title }}{:/font}**
{% newline %}
*Under development*

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



================================================================================================================================================
REVIEW AND COMPLETION: DOCUMENT LINKS
================================================================================================================================================  {% endcomment %}

{% assign title = 'Links to Key Documents' %}


**{::font size="m"}{{ title }}{:/font}**
{% newline %}
*Under development*

<br>{% newline %}{% newline %}
{% comment %} End of section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  {% endcomment %}
{% endstripnewlines %}

Thanks
Joe

sven · June 17, 2020, 9:15am

Hey @jhanley,

Thanks for sharing this so nicely

Why not create separate tables, each of them in their own stripnewlines tags?
Like this (very easy example):

{% comment %}
================
    Table A
================
{% endcomment %}

{% stripnewlines %}
| Some text
| Some nbrs
{% newline %}
|----80%----
|-----------:#
{% fori item in custom.coll_a %}
  {% newline %}
  | {% input item.some_txt %}
  | {% input item.some_nbr as:currency %}
{% endfori %}
{% endstripnewlines %}

<p></p>


{% comment %}
================
    Table B
================
{% endcomment %}

{% stripnewlines %}
|----90%----
|-----------:#
{% newline %}
| Some text
| Some nbrs
{% fori item in custom.coll_b %}
  {% newline %}
  | {% input item.some_txt %}
  | {% input item.some_nbr as:currency %}
{% endfori %}
{% endstripnewlines %}

This allows <p></p> (or a break tag if you prefer more white space) to be added more effective. Because now, in your case, it’s all in one stripnewlines-tag (nothing wrong with it), but you do create several tables in it.
It could be a good coding guideline that each table has its own stripnewlines if you want to play around with whitespacing for example (something we regular do).

It looks like this:

Maybe that could be a solution for you?

jhanley · June 17, 2020, 9:35am

Thanks @sven, and good suggestion - this is really helpful!

This made me realise that I’ve a bad habit of trying to squeeze my entire code into one {% stripnewlines %}! I’ll definitely explore keeping this to individual tables, and I’m sure this will help me find the white-space balance that I’m looking for.

I’ll let you know if I stumble upon any more issues, but I’m sure this will solve my problems

Thanks again!

Joe

sven · June 17, 2020, 11:01am

Well, I wouldn’t call it a bad habit per se though I can already see some nice coding skills you’re posting, so keep up the good work I’d say

Topic		Replies	Views
How remove space between infotexts? Templates	2	433	March 15, 2021
Excess spacing between rows in tables Templates tables , styling	5	430	January 14, 2022
Blank space when custom box is empty Templates	1	472	December 2, 2019
Layout export text Exports	5	515	January 11, 2021
Table creating new lines on the same line Templates input , styling	2	308	November 28, 2022

Controlling White Space

Related Topics