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:
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>