[SOLVED] Few questions for left panel with f7-list-items

rastek · May 16, 2018, 9:49pm

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

nolimits4web · May 17, 2018, 1:53pm

Using no-hairlines-between prop of f7-list

Only using custom styles on that item

rastek · May 17, 2018, 4:16pm

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

I used example in this page, however I need more consistent solution.

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;
}