hello folks,
hoping someone could help me with the two following things:
-creating container like elements
-removing all header and footer padding from the basic table
- So I would like to bunch all elements into a container like element. I know I am going to lose some real estate due to the padding, but I think it is worth it if the eye is easily able to distinguish between sections. I do see on the Notion CC that there is a “section CSS” that I believe essentially turns your separator into a sort of hack that makes it looks like elements. I was hoping for a little more separation. There is another css option for a card like layout. I made a mockup of what I was hoping for it to look like (not sure why it came out blurry):
it is a mix of these two:
- The second thing is that I would like to remove the padding or the “dead” space reserved for the header and footer of the basic table. This is what is kind of causing me to use CSS. The spacing added by the basic table throws off the “section” look and forces me to add more spacing between my "sections. The whole thing just looks off to whoever is scrolling.
any help is appreciated
hi, this result for you is good?
in case if you enter this css
[data-test="app-simple-table"] {
max-height:0px;
min-height:130px;
height:34px;
font-size:13px;
margin-top:-20px;
}
play around with the px to get the desired result, if not let me know if i can help with anything else.
That is somewhat what i want to achieve. But i want to make a container that not only has the data table, but a few other things like a picture and a button. I guess a good way of thinking of it is that i want to house a few elements inside a box so that the eye can clearly see that these elements are together.
At first i thought it might be better to have a color background, but i think a white card with shadow will be better. So the end goal would be something like this:
As far as the actual simple data table goes. So far i’ve done this and it has helped. I am just unsure how to remove the padding/margin on the top. Seems like it is part of the title. I tried doing some padding stuff with .sts-title but it has not worked in terms of the padding/margin
I’ve done:
[data-test="app-simple-table"] {
padding-top: 0px;
padding-bottom: 0px;
}
So sort of something like this?
<pre><span><style>
.sts-title {
display: none;
}
[data-test="app-simple-table"] {
padding-bottom: 0px;
}
that worked thank you. I will remove it from a few basic tables on other pages.
What about this?
Any thought on how i could achieve it? I assume it is a little tougher because i need to tell it which elements need to sit within it. Then repeat it for each set of elements.
What CSS snippet are you using to create the card-like view?
I just stitched together png photos for that example. But the card like view is from your notion page
That card view is the inline list’s card layout, I haven’t tried to replicate that with CSS.
Not sure if it helps or not, but what you describe is a native thing in Glide Pages.
For example:
That is a card container with 2 columns (text, button, rich text on the left; image on the right).
1 Like
Yeah I’m really bummed they don’t have card/containers for apps. Hopefully soon.
What about these two? Same type of thing? Ultimately I just need the background to be a little different so it separates the sections.
