Question

I want to build a legend in the following format: with minvalue, separated, maxvalue

For example –

10-20

20-30

30-40

The problems are :

1.I don’t succeed to align the text. I want that the min value will be at the right place the
separated will be at center and the max value will be at left.

2.
I need that the the number will be allign for example

    0 - 20
10000 - 3000
20000 - 40000
30000 - 500000


var legendWrapper = $('<div />');
legendWrapper.addClass('legendWrapper')
parentElement.appendChild(legendWrapper.get(0));
legend.addClass('legend')

for (var index = 0; index < self.legendData.getSubElementLength(); index++) {

    var legendItem = $('<div />');
    legendItem.addClass('legendItem')
    if (index == self.legendData.getSubElementLength() - 1) legendItem.addClass('lastLegendItem');

    var color = $('<span />');
    color.addClass('legendColor')
    legendItem.get(0).appendChild(color.get(0));

    var minValue = $('<span />');
    minValue.addClass('minValue')
    legendItem.get(0).appendChild(minValue.get(0));

    var separated = $('<span />');
    separated.addClass('separated');
    legendItem.get(0).appendChild(separated.get(0));

    var maxValue = $('<span />');
    maxValue.addClass('maxValue')
    legendItem.get(0).appendChild(maxValue.get(0));

    legend.get(0).appendChild(legendItem.get(0));
}
$('.legendWrapper').get(0).appendChild(legend.get(0));

The CSS:

.legendWrapper {    

}

.separated {
    text-align: center;
}

.minValue {
    text-align: left;        
}
.maxValue {
    text-align: right;
}

.legend {
    background-color: black;
    position: fixed;       
    opacity: 0.7;
    margin: 10px;
    padding: 5px;
    width: 150px;
    height: 100px;
    clear: both;        
    right: 80px;
    top: 800px;
}

.legendColor {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;     
    color: white;        
    opacity: 1;   
}

.legendItem {
    color :white; 
    height: 20px;       
    opacity: 1;
}

When I added text-align to the legendItem it aligns the text but it aligns all of the span and I want to align span by span.

Could you please advise me on how to fix this issue?

Answer 1

Hopefully I am reading your question correctly….

Change the order of how you add in the spans:

var maxValue = $('<span />');
maxValue.addClass('maxValue')
legendItem.get(0).appendChild(maxValue.get(0));

var separated = $('<span />');
separated.addClass('separated');
legendItem.get(0).appendChild(separated.get(0));

var minValue = $('<span />');
minValue.addClass('minValue')
legendItem.get(0).appendChild(minValue.get(0));

Spans are inline elements so they will line up in the order you add them to the DOM.

You can take out all of the text-align attributes as it looks like you won’t need them if the ordering solves your problem.

EDIT:

<div class="con">
    <div class="lft">MAX_VAL</div>
    <div class="sep"> - </div>
    <div class="rgt">MIN_VAL</div>
</div>

.con {overflow:hidden;}
.lft {width:100px; float:left; text-align:right; }
.sep { float:left; }
.rgt {width:100px; float:left; text-align:left; }