1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Generated SVG has height and width of 0

Generated SVG has height and width of 0

Basic BarCode (doesn't matter on the comments, enable or disable, all the same results):

if (!document.querySelector('#barcode_dialog').classList.contains('e-dialog')) {
                var barcode_dialog = new ej.popups.Dialog({
                    buttons: [
                        {
                            'click': function(e) {
                                this.destroy();
                            },
                            buttonModel: {
                                content: 'Close'
                            }
                        }
                    ],
                    allowDragging: true,
                    header: 'Scan Barcode',
                //    position: { X: 'left', Y: 'center' },
                    content: '<div id="barcodelabel"></div>',
                    target: document.getElementById("container"),
                    width: '450px'
                });
                barcode_dialog.appendTo('#barcode_dialog');
                if (!document.querySelector('#barcodelabel').classList.contains('e-barcode')) {
                    var  barcodelabel = new ej.barcodegenerator.BarcodeGenerator({
                      //  type: 'Code128',
                        value: 'TEST',
                        /* width: '300px', 
                        height: '150px', */
                      //  mode: 'CVG',
                    });
                    barcodelabel.appendTo('#barcodelabel');
                }
                barcode_dialog.show();
            }            

Results in:

<div class="e-dlg-content" id="barcode_dialog_dialog-content">
<div id="barcodelabel" class="e-control e-barcode e-lib" style="height: 100px; width: 100%;">
<svg id="barcodelabelcontent" height="0" width="0" style="background:white"></svg>
</div>
</div>

Any thoughts as to why?



3 Replies 1 reply marked as answer
GG Gowtham Gunashekar Syncfusion Team March 30, 2021 12:57 PM UTC

Hi Mark, 
 
On the further analysis of the shared details, we found you have not set the width and height for the BarcodeGenerator that’s the “barcodelabelcontent” div has the width and height as 0, because the dialog box is not rendered at the time of barcode initialization. The barcode generator has two modes such as “SVG” and “Canvas”. We suppose not to set some other mode to the BarcodeGenerator. We have added a sample link to demonstrate how to render a barcode in the dialog box. 
 
 
 
Regards, 
Gowtham 
 


Marked as answer
MA Mark March 30, 2021 01:33 PM UTC

Thank you for your response.  Once I realized that it was due to the div's height, I solved the issue by simply showing the dialog, wait 10 milliseconds, and then bind the barcode.

function inventory_grid_showBarcodeDialog(item_number){
            if (!document.querySelector('#barcode_dialog').classList.contains('e-dialog')) {
                var barcode_dialog = new ej.popups.Dialog({
                    buttons: [
                        {
                            'click': function(e) {
                                this.destroy();
                            },
                            buttonModel: {
                                content: 'Close'
                            }
                        }
                    ],
                    allowDragging: true,
                    header: 'Item Barcode',
                    content: '<div id="barcodelabel"></div>',
                    target: document.getElementById("container"),
                    width: '350px'
                });
                barcode_dialog.appendTo('#barcode_dialog');
                barcode_dialog.show();
                if (!document.querySelector('#barcodelabel').classList.contains('e-barcode')) {
                    var  barcodelabel = new ej.barcodegenerator.BarcodeGenerator({
                        type: 'Code128',
                        value: item_number,
                        width: '300px', 
                        height: '150px', 
                        mode: 'SVG',
                    });
                    setTimeout(function(){
                        barcodelabel.appendTo('#barcodelabel');
                    },10);
                    
                }                
            }            
        }

GG Gowtham Gunashekar Syncfusion Team March 31, 2021 01:14 PM UTC

Hi Mark, 
 
Thanks for your response. Please let us know if you need any further assistance on this. 
 
Regards, 
Gowtham 


Loader.
Up arrow icon