TreeSelect

UI Builder
1

Hello,
I’m working with a treeselect, so that it has the function of superimposing the text on top of the box as an input, how would that be possible?

Like this:

image
image314×116 778 Bytes

Regards,
Alvaro

2

Hello @Alvaro_Sanchez

Could you describe what you interesting in a little bit detailed?
Is there something broken?

Regards, Dima

3

Yes, I rephrase my question; the treeSelect component does not have the management of the input title being placed at the top of the input, what it does directly is that it is momentarily removed when opening the selection drop-down.

I’m going to add images to make it more explanatory; in this case “Select Item” when selecting the field it remains the same and when selecting an option it is replaced by the name of the selection.

image
image442×244 2.45 KB

image
image436×229 2.51 KB

I would like to manage the title of the treeSelect in the same way that it is managed in an input like this:
image

4

@Alvaro_Sanchez unfortunately there are no possibility to do it with a tree select. You could do your own custom component that will allow it.

5

Hello,
I’m creating a custom component to address this problem. I’m using a Tree Select as the base.

image
image1240×784 54.8 KB

image
image316×259 2.91 KB

I’ve been trying several things to make the text hover over the input when I click on it, but it hasn’t worked.

If you could guide me through the code to implement and where to place it, that would be a great help.

Regards,
Alvaro

6

Hi Alvaro,

If the goal is to make the label float above the input when clicked, you’ll typically need to use CSS or manage the state within your component. Consider using:

  • A label element with position: absolute and transitioning it when the input is focused.
  • Managing an internal state that detects when the input is active and applying the right styles dynamically.

Regards,
Stanislaw

8

Hi,

I’m using these styles in my index.less file for the custom component. I’m able to change the color and adjust the label’s position. But I can’t get the label to float when I focus. Here’s my code:

image
image1208×782 60.4 KB

I also don’t know if other styles that index.less already has are getting in the way. I’ve taken the code from the treeSelect documentation.

Regards,
Alvaro

9

Hello @Alvaro_Sanchez

Just to clarify, this task is not about pasting 2 lines of styles, even if you know what you are doing. It requires time to implement animation/JS logic. We are unable to do it for you for free.

You could contact sales@backendless.com and hire a developer, but I still think that a better solution will be to leave it as is(as far as it works well).

Regards, Dima

10

Thanks, I’ve already created my custom component with the function I wanted.

2 Likes