rastek
May 16, 2018, 9:49pm
#1
I used left panel in template code for v2 and I want to change few things
How can I remove lines between f7-list-items ?
How can I put last f7-list-item (settings) to bottom of the page ?
f7-page
f7-navbar
f7-list-item(link='/presences/', view='#main-view', panel-close='')
f7-list#navList
f7-list-item(link='/favorites/', title='Favorites', view='#main-view', panel-close='')
i.icon.material-icons.md-only star_border
f7-list-item(link='/contact/', title='Contact', view='#main-view', panel-close='')
i.icon.material-icons.md-only contacts
f7-list-item(link='/conference/', title='Conference', view='#main-view', panel-close='')
i.icon.material-icons.md-only supervisor_account
f7-list-item(link='/settings/', title='Settings', view='#main-view', panel-close='')
i.icon.material-icons.md-only settings
Using no-hairlines-between
prop of f7-list
Only using custom styles on that item
1 Like
rastek
May 17, 2018, 4:16pm
#3
thanks first issue is solved but second one is not. I assigned this class to f7-list-item but didnt change anything, is there a special class in f7 for that ?
.bottom > * {
vertical-align: bottom;
}
rastek
May 17, 2018, 6:59pm
#4
I used example in this page, however I need more consistent solution.
CSS - How to align something at bottom. Tags: css, alignment, bottom, html, programming, position, relative, absolute
I assigned this class to final f7-list-item,
f7-list-item.my-image-botton-right(link='/settings/', title='Settings', view='#main-view', panel-close='')
.my-image-botton{
position:absolute;
bottom:-400px;
}
and I assigned .div-container to f7-page, however it doesnt matter for this one, my-image-botton seems enough for the putput in this screenshot
.div-container{
position:relative;
}