How to create filter bar like this?

I changed it to this but the button remains on the left. Should I place the class in a different spot? Right now it’s on the rich text component.

/*delete button CSS*/
[data-testid="wire-container-delBtn"] {
	margin-top:0 !important;
}
[data-testid="wire-container-delBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
	right:auto;
	right:calc(var(--container-x-pad) + 10px);
	width:fit-content;
}

All that is needed is this code, no need to add other codes.

1 Like

but then the container shifts when I type and the app looks weird.

image

Works fine on me.



it works without shift even when you only enter numbers into 1 of the columns?

It might be a problem that your delete button is hidden, so the container does center alignment. Try using top alignment.

thanks, top alignment fixes the relative shift between the column.

Another issue is that the placement of the button is on top of the arrows that are visible on desktop mode. :sweat_smile:

Screenshot 2024-06-21 070249

So what do you expect? Why is your number input aligned to the right?

I moved the text to the right to accommodate the delete button on the left. It does not affect anything else. I can align-left again if everything else is fixed. But at the moment, I’m not sure I like the shifting container size and also the delete button appearing on top of these arrows does not work for me. It’s messy.

Do you want to remove the spinner arrow?

yes thanks, that would be better.
But I also have a question @Himaladin … Why is the container perfect when I use the full code but then we need to delete the other codes to keep the delete button to the right??
Shouldn’t there be a way to accomplish the fixed container size AND the delete button to the right?

/*delete button CSS*/
[data-testid="wire-container-delBtn"] {
	margin-top:0 !important;
}
[data-testid="wire-container-delBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
	right:auto;
	right:calc(var(--container-x-pad) + 10px);
	width:fit-content;
}

.entryStyle [data-testid="wf-input"]::-webkit-inner-spin-button{
display: none;
}

This code simply sets up a richtext container that is empty due to being left behind by the HTML from your delete button :ghost:. Under certain conditions this will disturb the components located beneath it.

Please use it and see the difference:

[data-testid="wire-container-delBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
    left: auto;
	right:0;
	width:fit-content;
}
2 Likes

yes!!! This is perfection :raised_hands: :partying_face: :partying_face:

1 Like

@Himaladin I just noticed that while the number entries are now perfect, the codes shifted the normal text entry delete button. What can we do to fix this?

Nevermind, I re-added the original code with the deleteBtn class to use for the text entries. :+1:

image

Yes, they are different, two conditions with different distances from the right.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.