Question

I’m having canvas

<div id="app-container">
    <div id="canvas-container">
        <div id="canvas"></div>
    </div>
</div>

in css I have

#canvas {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
}

#app-container {
  height: auto !important;
  min-height: 100%;
}

#canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

I’m trying to add text block to canvas

$container= $("#canvas");
var $view = $("#template-textview").tmpl();
$("<div class=\"text-field\">" + me.text + "</div>").appendTo($view);
$view.appendTo($container);

after that text takes all width. How can I tell it to take only width, required by text?

Thank you in advance!!

Answer 1

Since you’re using a block element ( div ) it naturally expands to 100% of the parent width.

To fix that try to make it inline-block :

div.text-field { display: inline-block }