Too much space between logo and text box

Using Streamlit
1

Summary

Having too much space above and below the logo (check below image and red box area):
I am using streamlit_lottie

image
image2738Ă—1393 161 KB

Steps to reproduce

Code snippet:

import streamlit as st
from streamlit_lottie import st_lottie
import requests

def fetchLottieJson(url):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

animation = fetchLottieJson("https://assets6.lottiefiles.com/packages/lf20_ksrcyxgn.json")

st_lottie(animation, height=300,key="coding")
site = st.text_input('', '', placeholder='https://')

Expected behavior:

There should not be that much space (check the RED COLOR boxes in the image above)

Debug info

  • Streamlit version: 1.23.1
  • Python version: 3.11.4
  • Using: VS Code
  • OS version: Windows 11
  • Browser version: 114.0.1
2

Hello @Zeeshan_Hashmi, and welcome to our forums! :raised_hands:

I’m unable to replicate the additional padding shown in your screenshot. but I indeed see there’s some padding surrounding your Lottie file.

image
image1792Ă—1008 59.3 KB

That padding seems to be from the JSON file itself, so my suggestion would be to try cropping any blank areas in the animation using Adobe After Effects before exporting it again.

Please let me know if this helps!

Best,
Charly

3

Thanks ! I will try that OR may be using some CSS I can control it.

1 Like
4

Sounds good, @Zeeshan_Hashmi!

Let us know how it goes! :slight_smile:

Thanks,
Charly

5

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