john john - 4 months ago 13
CSS Question

Remove white space between divs when using jinja2

So I get that white spaces are created if two inline divs are next to each other with a new line.
But my problem is that I have a bunch of jinja 2 code so I can't just put the divs on the same line.

I want to put

divs
inline so that they appear next to each other without space in between them. My layout is dynamically generated. Here is what it looks like nowenter image description here

The container is
900px
wide so I tried to make each data div to be
300px
so I can have 3 fields per row.

This is what I would like it to look like:
enter image description here

Here is the code for the title and the fields:

HTML/Jinja2

<div class="section">

<div class="sectionTitle">
<label class="print_h3">{{ title }} Info</label><br />
</div>

<div class="print_dataDiv">
<label class="print_inputBoxLabels">Model</label>
<select name="model" class="print_inputBoxes">
</select>
</div>
<div class="print_dataDiv">
<label class="print_inputBoxLabels">Substation</label>
<select name="substation" class="print_inputBoxes">
</select>
</div>
{% for field in field_list %}
<div class="print_dataDiv">
<label class="print_inputBoxLabels">{{field.field_name}}</label>
<input class="print_inputBoxes" name="field_{{field.field_id}}_{{field.device_id}}" value="{{field.field_value}}" type="input">
</div>
{% endfor %}
</div>

CSS(in order as they appear in the code):
.section{
width: 100%;
height: auto;
border: solid 1px;
}
.sectionTitle{
width: 100%;
text-align: center;
height: 30px;
border: solid 1px;
background: #B3B3B3;
border-left: none;
border-right: none;
//margin-bottom: 5px;
}
.print_dataDiv {
height: 30px;
width: 300px;
display: inline-block;
border: solid 2px;
}
.print_inputBoxLabels{
width: 140px;
height: 30px;
display: block;
text-decoration: none;
float: left;
font-size: 80%;
margin-left: 2px;
margin-left: 2px;
}
.print_inputBoxes{
width: 130px;
height: 30px;
display: inline-block;
float: right;
outline:none;
}


EDIT: here is a bigger example of my jinja2 code that prevents lining the divs up on the same line

{% for inspection in data.inspections %}
<div class="print_dataDiv">
<label class="print_inputBoxLabels">{{ inspection.insName }}</label>
{% if inspection.statusDict|length > 0 %}
<select class="print_inputBoxes" name="inspection_{{ inspection.insID }}_{{ inspection.inspectionID }}">
{% for key, value in inspection.statusDict.iteritems() %}
{% if key == inspection.value %}
<option selected="selected" value="{{key}}">{{value}}</option>
{% else %}
<option value="{{key}}">{{value}}</option>
{% endif %}
{% endfor %}
</select>
{% else %}
<input type="text" class="print_inputBoxes" name="inspection_{{ inspection.insID }}_{{ inspection.inspectionID }}" value="{{inspection.value}}">
{% endif %}
</div>
{% endfor %}

K K K K
Answer

Try this:

{% for field in field_list %}<!--
        --><div class="print_dataDiv">
                <label class="print_inputBoxLabels">{{field.field_name}}</label>
                <input class="print_inputBoxes" name="field_{{field.field_id}}_{{field.device_id}}" value="{{field.field_value}}" type="input">
            </div><!--
-->{% endfor %}

Alternatively, give font-size:0 to the parent.