Skip to main content

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
QlikWorld 2023, a live, in-person thrill ride. Save $300 before February 6: REGISTER NOW!
cancel
Showing results for 
Search instead for 
Did you mean: 
Costa
Contributor III
Contributor III

Variable Input - Dropdown: move drop down field to the center

Hey :),

 

can someone help me out and provide me with a CSS Code to move the variable input object as a drop down to the center so it is aligned with the button to the right?

Costa_0-1664611843522.png

 

Labels (1)
1 Solution

Accepted Solutions
saso70
Partner - Creator
Partner - Creator

Hi , probably you will need to use calc function in css to calculate top position , now this position is static and for different size of screen will be different position please check the calc function https://developer.mozilla.org/en-US/docs/Web/CSS/calc

View solution in original post

4 Replies
saso70
Partner - Creator
Partner - Creator

Hi, please open Developer tools and select variable input object and find tid

saso70_0-1664619717986.png

 

use following css; 

div[tid="eyPDc"] {
position:absolute;
top:20px !important;
}

You can use if you need following css property to move the object top, bottom, left, right.

I hope this will help you 

Costa
Contributor III
Contributor III
Author

Hey Saso,

first off, many thanks! 

I changed the "top 20px" to 270px to align with the buttons on the rights.

Costa_2-1664620865660.png

 

it kind of works (don't be irritated by the grey coloring,...)

Costa_0-1664620620914.png 

However, if i switch the screen (e.g. to my notebook) it is completly offset:

Costa_1-1664620697442.png

So the top:- statement moves the whole object and not the drop down class within the object.

Did I do something wrong?

Best

 

saso70
Partner - Creator
Partner - Creator

Hi , probably you will need to use calc function in css to calculate top position , now this position is static and for different size of screen will be different position please check the calc function https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Costa
Contributor III
Contributor III
Author

it works 🙂 - Many thanks

div[tid="wYpPJM"] {
position:absolute;
top: calc(24% - 10px) !important;
}


div[tid="kpcrh"] {
position:absolute;
top: calc(12.8% - 10px) !important;
}