search

framework7io / framework7-vue

Deprecated! Build full featured iOS & Android apps using Framework7 & Vue
http://framework7.io/vue/
MIT License
674 stars 151 forks source link

List with inline labels and long text as link #431

Closed lroal closed 6 years ago

lroal commented 6 years ago

I am trying to create a list with links, inline labels and a long text as content. The long text should have an ellipsis if it is too long. The long text should not be editable (just displayed in greyed as a link). I am having a hard time to do this. It might work if i override the styles - but suppose there is a cleaner way of doing it.

lroal commented 6 years ago

When adding this style, it works (copied from smart-select): 

.item-link .item-after {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: block;
}

<f7-list-item link="/filters/style/" title="Style" after="slopers, crimps, balance, power, overhang, foo, bar, baz, long text"></f7-list-item>

Maybe this should should be added to the f7 css. Or do you see any problem with that ?

nolimits4web commented 6 years ago

Maybe this should should be added to the f7 css. Or do you see any problem with that ?

Yes, this styles are for some specific cases only, and can't be used globally. You shouldn't afraid of adding few custom styles, it is totally OK