How to create filter bar like this?

Ask for Help
21

No, it has no effect. Try copying and pasting the code above again.

22

thatā€™s strange thenā€¦ i re-copied it and it still places the button on the left.

image

23

This is just plain HTML and CSS-inline, you can turn on ā€œuse compiled CSSā€ to see if any other CSS is causing it. Apart from that, make sure that this richtext component does not need to be given a class name.

1 Like
24

ok, thanks! I found the clash. I forgot to delete the code from the settings so it was appearing twice.

The button is on the right now.

Now that thatā€™s out of the way, can I decrease the text font size or maybe reduce the column padding a bit? @Himaladin

1 Like
25 
.entryStyle textarea {
font-size:10px;
padding:12px 12px;
}
1 Like
26

not noticing any difference

1 Like
27

Have you given a class name?

28

yes, i gave it the class

29

Iā€™m senile, it turns out you use number entry not text entry.

.entryStyle [data-testid="wf-input"] {
font-size:10px;
padding:12px 12px;
}
30

haha ok. It works now!
But I think it clashes with the rich text delete button. Did you try it?
Seems to pull the delete-button position down.

31

No. Itā€™s not related. However, the problem is that the margin/padding of your entry when viewed on mobile and desktop may be different.

32

I had to decrease the delete-button margin to position it properly:
ā€œmargin-top:-53px;ā€

But it doesnā€™t work well in both mobile and desktop views.

I had to remove all of my delete buttonsā€¦ undo wouldnā€™t fix them back. :frowning_face:

33

Place your delete button below the entry number, not above it.
Later this afternoon I will give you the code to correct the default distance (margin/padding) from Glide which makes richtext unable to have consistent distance between the two devices.

34

they were below the entries.
I will wait for your fix before I put them back.

35

Iā€™ve got the code. I was annoyed because the dashboard performance was very slow. This is the correct setting, you should copy it again.

<!--Delete Button-->
<div class="cross" style="float: right; margin:0px 2px 0 auto; 
height: 25px;width: 25px; opacity:0.4;border-radius: 10px;
z-index: 5; filter:invert(0.1);"><img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/pJe35hcDzEqIcW2idyHc.webp" alt="Cross Button" style="margin-top:-37px;"/></div>

Give the class a name you like or use ā€œdelBtnā€ in your richtext component. This code will remove different margin-tops across mobile and desktop.

[data-testid="wire-container-delBtn"] {
	margin-top:0 !important;
}
36

Why is it that when I start typing, the container height changes? I think this causes the displacement in the button position.

37

Yes, thatā€™s a common behavior called auto-expanding in a textarea.

38

oh ok

39 

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

This was the cause of the buttons appearing on the right in the threeColumn container gridā€¦ but I need it to keep the container shape when entering texts or numbersā€¦ do you have any suggestions?

40

Just need this with different classes. Does this interfere with your input?