html - Thumbnails are appearing Vertical in Firefox -
i have view multiples cards(thumbnails)are appearing,they in horizontal line when see in google chrome , same in vertical when see firefox.i hope problem css not able determine it.please suggest..!
here attaching result...!!
http://i.stack.imgur.com/flvw3.png , http://i.stack.imgur.com/sld48.png
css
.pincolumns { -moz-column-count: 4; -moz-column-gap: 10px; -moz-column-fill: auto; -webkit-column-count: 4; -webkit-column-gap: 10px; -webkit-column-fill: auto; column-count: 4; column-gap: 10px; column-fill: auto; } .pin { -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; margin: 0 2px 5px; padding: 5px; border: 1px solid #eee; border-radius: 5px; font-size: 0.8em; } .pin .title { font-weight: bold; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 270px; overflow: hidden; } .pin .description { -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 270px; height:40px; overflow: hidden; } .material .picbox img{ width: auto !important; } .pin-small .pin{ margin: 0 2px 5px; padding: 5px; } @media , (max-width: 360px) { .pincolumns { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-fill: auto; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-fill: auto; column-count: 1; column-gap: 0px; column-fill: auto; } } @media , (min-width: 960px) { .pincolumns { -moz-column-count: 3; -moz-column-gap: 5px; -moz-column-fill: auto; -webkit-column-count: 3; -webkit-column-gap: 5px; -webkit-column-fill: auto; column-count: 3; column-gap: 5px; column-fill: auto; } } @media , (min-width: 1170px) { .pincolumns { -moz-column-count: 4; -moz-column-gap: 10px; -moz-column-fill: auto; -webkit-column-count: 4; -webkit-column-gap: 10px; -webkit-column-fill: auto; column-count: 4; column-gap: 10px; column-fill: auto; } } js
@functions{ public cardviewmodel tocard(contentpicture m, bool canedit) { var o=new cardviewmodel{ name="picture", id=m.id, title = m.title, description = m.description, pic = new vzdev.viewmodels.pic { source = m.image, height = 0, width = 280, text = m.title }, pictureviewtemplate="_pic", notice=m.isrejected && !string.isnullorwhitespace(m.rejectreason) ? m.rejectreason:string.empty, showtools=canedit, pinclass="selectable" }; if(m.ismoderated){ if(!m.isrejected){ o.extras.add(new extrabutton { icon = "icon-share-alt", link = url.action("share","picture", new {id = m.id }), title = "share" }); } if (m.isdownloable) { o.extras.add(new extrabutton { icon = "icon-download", link = "https://vzconsole.com/assets/" + m.image + "?down=true", title = "download" }); } } else if (canedit) { o.extras.add(new extrabutton { icon = "icon-ok", link = url.action("moderate", "picture", new { id = m.id }), title = "moderate" }); } o.extras.add(new extrabutton { icon = "icon-comment", class = "light", link = url.action("picture", "comment", new { id = m.id }), title = "comments" }); return o; } } @html.partial("_cards", html.tocards<contentpicture>(model.items,isadmin,tocard)) , _cards, html
<div class="row"> <div class="span12"> <div class="row-fluid"> <div class="pincolumns"> @foreach (var m in model) { @html.partial("_card", m) } </div> </div> <table class="table grid hide"> <thead> <tr> <th></th> <th>title</th> <th>description</th> <th></th> </tr> </thead> <tbody></tbody> </table> </div> </div>
Comments
Post a Comment