Regarding alignment of label

0
Hello, There is a requirement where need to align the label (of dropdown/text etc.) so that the label should show in the middle of the field.      Something this, like label should show in middle of the box (currently label is at top)   Please let me know, how can we achieve it.   Thanks in advance
asked
4 answers
1

Hey Trishla,

You shouldnt put your label inside your textbox as it will block your input when you click on that. instead you can use the placeholder in the textbox properties . 

But if you have to use the label inside the textbox You can use css absolute positioning to achieve this. Give a class to the textbox or dropdown. And in scss write your styles for that textbox. 

.className{

position:relative;

}

.className>label{

position:absolute;

top:10px;

right:5px;

}

Adjust the top and right  pixels as per your need .

answered
1

if you want to use css styles to achive this i wouls suggest not to use padding but assigning css for doing so:

.form-horizontal .control-label {
 
    display: flex;
    align-items: center;
}

please note this this will set the whole apps horizentle layer in center.

if you want other wise[may be for a page only or something like that apply a css to external div and put it there in CSS selector too.

.css-on-top-level .form-horizontal .control-label {
    display: flex;
    align-items: center;
}

 

answered
0

Hello Trishla,

 

You can use table inside layout grid with 2 columns and position the label according to your requirement.

Hope it will help!!

answered
0

Add a class to the textArea, say “labelinthemiddle”

Then in your Styling → web → main.scss add:

div.labelinthemiddle{
    label.control-label{
        padding: 10% 0;
    }
}

 

answered