CODEWITHSUNDEEP
streamlit
DarknessFalls
DarknessFalls

Reputation: 111

Add line break to streamlit text input

I have a form I'm building with 3 text inputs on the same row, however one of the descriptions takes 2 lines vs 1 line for the others. This is leading to the input boxes below not being aligned.

I tried adding carriage returns & line breaks special chars to the text input so that the text would start one row lower, but it's not working.

Ends up looking like this ... but I want my input rows aligned.
bla bla bla bla bla bla bla bla bla
bla bla bla Input Input
Input

Tried the following but not working

msrp = cols[2].text_input("\n\r MSRP")

Any way to add line breaks to the texts so that I can get my input boxes below aligned or some other way to force it?

Upvotes: 0

Views: 10890

Answers (2)

Alexandre Alves
Alexandre Alves

Reputation: 41

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
align-items: end;
}

.col {
padding: 15px;
}
<div class="grid">  
<div class="row">
<div class="col">
<label>blá blá blá  blá blá blá blá blá blá blá blá blá blá blá blá</label>
<input asp-for="First_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Second_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Father_Name_AR" class="form-control" />
</div>
</div>
</div>

Upvotes: 0

签到钱就到
签到钱就到

Reputation: 26

use cell_renderer to make line break (\n,\t ...) change to <br> take effect.

only test on show data, may not take effect on edit field

from st_aggrid import AgGrid, GridOptionsBuilder, JsCode

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(
        editable=True, wrapText=True, autoHeight=True // here is the key point
    )
cell_renderer = JsCode("""
    function(params) {
    return params.value.replaceAll("\\n","<br>"); // here is the key point
    }
    """)
gb.configure_column('hash_code', cellRenderer=cell_renderer,maxWidth=200)
gbb = gb.build()
AgGrid(df, gbb, height=1000, allow_unsafe_jscode=True, theme='blue')

more detail :

https://ag-grid.com/javascript-data-grid/row-height/
https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/

Upvotes: 1

Related Questions