Hello,

I am creating an application and I need to put text and other widgets inside an image. 

How can I do it?

Hi Sara,

It depends - do you need to do this as a way to present something to the user? You could achieve this with CSS properties like position.

Do you need to manipulate what you're placing over the image? Loading and storing it? You might need to resort to Javascript and SVG elements to draw over it.

Solution

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel

Solution

Daniël Kuhlmann wrote:

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel


Hi! Tks!

It Works :)

Cool!