Skip to main content
Announcements
Accelerate Your Success: Fuel your data and AI journey with the right services, delivered by our experts. Learn More
cancel
Showing results for 
Search instead for 
Did you mean: 
Louveduval
Creator
Creator

grouped contaigner and CSS

Hello,
I'm traying to made to creat a green border around the grouped contaigner  

Louveduval_0-1673453322095.png

Louveduval_1-1673453350817.png

 

=& {
box-shadow: 5px 5px 5px rgba(200, 200, 200, 0.8);
border: 4px solid rgb(130,170,55);
}

But It's does not work 

Labels (2)
2 Solutions

Accepted Solutions
deepanshuSh
Creator III
Creator III

Hi, You are using the wrong format of CSS for getting the values. Please refer to my earlier post for getting the same. 

If you just want to add the border, there is a default option for the container under properties. However, CSS is a way to go for better UI. 

https://community.qlik.com/t5/App-Development/Styling-Qlik-sense-Apps-using-CSS/m-p/2003818

Trial and error is the key to get unexpected results.

View solution in original post

Louveduval
Creator
Creator
Author

Ok I know why , we need to had a padding: 'x'px  . 

Louveduval_0-1673607050201.png

 

View solution in original post

5 Replies
deepanshuSh
Creator III
Creator III

Hi, You are using the wrong format of CSS for getting the values. Please refer to my earlier post for getting the same. 

If you just want to add the border, there is a default option for the container under properties. However, CSS is a way to go for better UI. 

https://community.qlik.com/t5/App-Development/Styling-Qlik-sense-Apps-using-CSS/m-p/2003818

Trial and error is the key to get unexpected results.
Louveduval
Creator
Creator
Author

I've try 

= [tid="dNdanc"] .qv-object {background-color: #ffffff !important;

border-radius: 20px;

box-shadow: 2px 2px 2px 2px grey;}

[tid="dNdanc"] .qv-object-title-text {width: 100%; border-radius: 7px;}

[tid="dNdanc "] .qv-object-title,

[tid="dNdanc "] .qv-inline-edit-value {text-align: center; vertical-align: middle; font-weight: medium;}

But it's doesn't work 😞 

Louveduval_0-1673522262703.png

Louveduval_1-1673522283716.png

 

 

deepanshuSh
Creator III
Creator III

If you are using the Custom CSS portal inbuilt in the function, then you dont need to provide the TID, the TID is the object ID used to identify when you are using the MultiKPI-CSS Option. Please check the steps mentioned in the post for understanding how to use CSS In qliksense using multiKPI.

Trial and error is the key to get unexpected results.
Louveduval
Creator
Creator
Author

with the multi-kpi :  the boder is under the grouped contaigner

 
 

Louveduval_0-1673529574741.png

[tid="dNdanc"].qv-object {background-color: #004664 !important;

border: 4px solid green;
border-radius: 20px;

[tid="dNdanc"] .qv-object-title-text {width: 100%; border-radius: 7px;}

[tid="dNdanc"] .qv-object-title,

[tid="dNdanc"] .qv-inline-edit-value {text-align: center; vertical-align: middle; font-weight: medium;}

 

Louveduval
Creator
Creator
Author

Ok I know why , we need to had a padding: 'x'px  . 

Louveduval_0-1673607050201.png