Skip to content
Advertisement

How to display the HTML output in rows

Where I am using the div class, there is a line-break after every if statement and the rows are not in alignment.

How can I correctly align the php output, so both rows is horizontal aligned.

function display_selected_variation_custom_field_js(){
        ?>
        <script type="text/javascript">
        (function($){
            var a = '.custom_variation-text-field', b = $(a).html();
    
            $('form.cart').on('show_variation', function(event, data) {
                outputHtml = '';
    
                if( data.model ) {
                    outputHtml += '<div align="left"> <span><strong><?php _e("Model"); ?><strong>: '+data.model+'<span></div>';
                }
                if( data.wattage ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Wattage"); ?><strong>: '+data.wattage+'<span></div>';
                }
                if( data.lumen ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Lumen"); ?><strong>: '+data.lumen+'<span></div>';
                }
                if( data.material ) {
                    outputHtml += '<div align="left"><span><strong><?php _e("Material"); ?><strong>: '+data.material+'<span></div>';
                }
                if( data.dimension ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Dimension"); ?><strong>: '+data.dimension+'<span></div>';
                }
                if( data.year ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Year"); ?><strong>: '+data.year+'<span></div>';
                }
                if( outputHtml ) {
                    $(a).html(outputHtml);
                }
            }).on('hide_variation', function(event) {
                $(a).html(b);
            });
        })(jQuery);
        </script>

Current Output:

enter image description here Expected Output: enter image description here

Advertisement

Answer

You can give some outer divs to your datas because your code is display everthing in separate line so this will help to differentiate between them .

Demo Code :

var a = '.custom_variation-text-field';
//suppose data look like this ..
var data = {
  "model": 13,
  "lumen": "somehtnf",
  "material": 122,
  "dimension": 12,
  "year": 1333,
  "wattage": 33
}

var outputHtml = '';
//give some outer div to differntiate them
var outer = "<div class='outer'>"
if (data.model) {
  outer += '<div align="left"><span><strong>Model</strong>: ' + data.model + '</span></div>';
}
if (data.wattage) {
  outer += '<div align="center"><span><strong>Wattage</strong>: ' + data.wattage + '</span></div>';
}
if (data.lumen) {
  outer += '<div align="right" ><span><strong>Lumen</strong>: ' + data.lumen + '</span></div>';
}
outer += outputHtml + "</div><div class='outer'>" //close it 
if (data.material) {
  outer += '<div align="left"><span><strong>Material</strong>: ' + data.material + '<span></div>';
}
if (data.dimension) {
  outer += '<div align="center" ><span><strong>Dimension</strong>: ' + data.dimension + '</span></div>';
}
if (data.year) {
  outer += '<div align="right" ><span><strong>Year</strong>: ' + data.year + '</span></div>';
}
outer += "</div>"
if (outer) {
  $(a).html(outer);
}
.outer>* {
  display: inline-block;
  width: 150px;
  height: 30px;
  border-bottom: 2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom_variation-text-field">

</div>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement