How to change div style width for dynamically div tag in html in Javascript?

Question

I have <span>title</span> inside of <div>... </div> .

title is binding dynamically. My problem is Title text is not showing full text because some <div> tags are created dynamically with Style="Width:150" .

If change div tag property width: auto , my Title text was displaying properly after editing div with property in developer tool.

How to change to as below to <div style=width:auto"..> ?

template: function (o) {
     return "<div> <span>" + o.Title + "</span> </div>"
}

Answer 1

As it appears that you are using WebIX, I suggest changing width when it is generated.

According to the documentation for a data view, the code would be something like this:

webix.ui({
    view:"dataview",
    container:"dataA",
    template: "<div class='webix_strong'>#title#</div> Year: #year#, rank: #rank#",
    data:...,
    datatype:"...",
    xCount:3, //the number of items in a row
    yCount:4, //the number of items in a column
    type:{
        width: 261,
        height: 90
    }   
});

If you have a static width, try setting the width to auto so it looks something like this:

webix.ui({
    view:"dataview",
    container:"dataA",
    template: function (o) {
        return "<div> <span>" + o.Title + "</span> </div>"
    },
    data:...,
    datatype:"...",
    xCount:3, //the number of items in a row
    yCount:4, //the number of items in a column
    type:{
        width: 'auto',
        height: 90
    }   
});

If it doesn't work, could you post your entire code between webix.ui({ and }) ?