How to display the HTML output in rows

user_9111944 0
Viewed 88

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

html php jquery
2 Answers

Yes, <div>s by default are a block tag, not an inline tag.

The easy way to do this is to use a <table>. That's not currently "cool", but it does solve the problem. The other way is to use the "float" attribute of CSS:

<div style='clear: both; float: left'>Left side</div>
<div style='float: center'>Center</div>
<div style='float: right'>Right side</div>

You would probably want to use classes instead of specifying the CSS like this.

Note that your second <strong> and <span> tags should both be closing tags: </strong> and </span>, although I'm not sure why the <span> is there at all.

user_18833160

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_106064000
Related