Unnecessary outer paddings

[gedinakova]

Description

On behalf of Pablo & George

• igniteui-angular version: 19.1
• browser:

The QB has some default outer paddings. What's more, the padding is split between the igx-query-builder-header and the igx-query-builder-tree (internal), which makes it hard to override.

Expected result

Either: a. it should have no outer padding, it's very easy to add it if needed. b. if it comes with default padding, it should be at the top-level, to make it simple to override, instead of being scattered in different sub-elements.

[desig9stein]

@gedinakova is there a way for me to see that sample from the screenshots?

[desig9stein]

Regarding the questions for the paddings.

They have to stay as they are now, the QB has theme properties exposed to the end user, like header and content background. If it does not have padding, adding a background to the header for example will make the QB look broken.

Comparison with and without padding:

@andiesm813 @ig-georgeA I created a custom theme for the QB to show the problem if QB has no padding and I noticed another problem even when there is padding :) As you can see from the screenshot the spacing between the header and the content looks odd, this is material but it looks the same for indigo. Since the gap between the header text and the content is not equal to the padding on top and there is no padding on top of the "From/To" labels. Can we do something about this?

We also have a problem If the user only changes the content background. I can fix this by ensuring that if the user doesn't provide a header background but provides a content background, the header will default to the same background as the content.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[simeonoff]

@gedinakova @desig9stein Can we get this resolved. If we're not removing the padding then we should close this issue, otherwise I'll let the bot close it the next time it becomes inactive.

[desig9stein]

@andiesm813 Can you take a look at this issue and let me know if we can close it without any fix, or if I have to do some refactoring

[gedinakova]

@pmoleri @ig-georgeA Pablo, George, can you, please, did you have a chance to check Marin's explanations above? Let's discuss the issue & decide whether we can leave this as is.

[pmoleri]

@gedinakova @desig9stein

I mentioned 2 options. If removing the padding is not a good option, then option b. is to make it easier to override by making it defined at the top-level.

i.e. I should be able to:

igx-query-builder {
   padding: 5px;
}

The problem is that right now the padding is split in different child elements:

igx-query-builder-tree is inner and can only be overriden by ::ng-deep

So, I think padding not at the igx-query-builder and will be friendlier for customization.

[desig9stein]

@pmoleri, that padding can't be directly applied to the query builder, as the header and content can have separate background colors defined by the user. That said, I can expose a CSS variable to control the padding. However, we don’t currently handle this kind of customization through our theming schemas, I can provide it as a standalone variable.

In the end you will be able to do overrider the padding like this:

igx-query-builder {
    --_query-bulder-padding: ...
}

let me konow if thats OK for you

[pmoleri]

I see. Although I tried the header background and it doesn't look too great, since then there's no padding on the expression content:

Regarding having a variable, I guess it would work. At least that way we don't have to ::ng-deep on components private to the QB. Something that might not even be possible for a web components QB.