{"id":1490,"date":"2018-07-15T09:58:52","date_gmt":"2018-07-15T17:58:52","guid":{"rendered":"https:\/\/www.waveplayer.info\/?p=1490"},"modified":"2020-06-01T00:35:11","modified_gmt":"2020-06-01T07:35:11","slug":"playlist-with-max-height","status":"publish","type":"post","link":"https:\/\/www.waveplayer.info\/docs\/playlist-with-max-height\/","title":{"rendered":"Playlist with max-height"},"content":{"rendered":"\n<p><style>\n.containers{display:flex;}<br \/>\n.container-player,<br \/>\n.container-article{flex:1 0;}<br \/>\n.container-article{margin-left:20px;}<br \/>\n@media screen and (max-width:900px) {<br \/>\n    .containers{flex-direction:column;}<br \/>\n}<br \/>\ndiv.wvpl-playlist{margin-left: 0;}<br \/>\n.wvpl-playlist ul{max-height:140px}<br \/>\n<\/style><\/p>\n\n\n\n<style>\n.wvpl-playlist ul {\n    max-height: 160px!important;\n}\n<\/style>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"waveplayer-container\"><div id=\"waveplayer-da6f1514b03cbfef2d3b2c15f3b6dc45-68c0075a8886c\" class=\"waveplayer loading wvpl-skin-w3-standard wvpl-palette-800e3a14c86733ad9ccc96fd80850d88 wvpl-style-light wvpl-size-lg wvpl-shape-circle wvpl-full-width-playlist \" data-size=\"lg\" data-limit=\"0\" data-mode=\"normal\" data-config_id=\"da6f1514b03cbfef2d3b2c15f3b6dc45\" data-instance_id=\"da6f1514b03cbfef2d3b2c15f3b6dc45-68b8d15b01919\">\n\t<div class=\"wvpl-cover\">\n\t\t<div class=\"wvpl-poster\"><\/div>\n\t<\/div>\n\t<div class=\"wvpl-wave\">\n\t\t<div class=\"wvpl-overlay\">\n\t\t\t<svg>\n\t\t\t\t<use xlink:href=\"#waveform-animation\" \/>\n\t\t\t<\/svg>\n\t\t\t<div class=\"percentage\"><\/div>\n\t\t\t<div class=\"wvpl-loading\">\n\t\t\t\t<div class=\"wvpl-loading-progress\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"message\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"wvpl-position\"><\/div>\n\t\t<div class=\"wvpl-waveform\"><\/div>\n\t\t<div class=\"wvpl-duration\"><\/div>\n\t<\/div>\n\t<div class=\"wvpl-interface\">\n\t\t<div class=\"wvpl-controls\">\n\t\t\t<div class=\"wvpl-icon wvpl-prev wvpl-disabled\"><\/div>\n\t\t\t<div class=\"wvpl-icon wvpl-play\"><\/div>\n\t\t\t<div class=\"wvpl-icon wvpl-next wvpl-disabled\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"wvpl-volume-slider\">\n\t\t\t<div class=\"rail\">\n\t\t\t\t<div class=\"value\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"handle\"><\/div>\n\t\t\t<div class=\"touchable\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"wvpl-infobar\">\n\t\t\t<div class=\"wvpl-playing-info\"><div class=\"wvpl-infoblock\"><\/div><\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"wvpl-playlist\">\n\t\t<div class=\"wvpl-playlist-wrapper\"><\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In this example, a specific CSS rule is applied to the playlist to set its <code>max-height<\/code>, like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"beyond\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.wvpl-playlist ul {\n    max-height: 160px!important;\n}<\/pre>\n\n\n\n<p>Because of that setting, the playlist only shows the first few tracks. The hidden items can be revealed scrolling with the mouse. In addition to that, WavePlayer automatically scrolls the playlist to make the playing track always visible. The automatic scrolling occurs either when the user advances the tracks with the skip buttons and when the player jumps to the next track at the end of the current one.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this example, a specific CSS rule is applied to the playlist to set its maximum height. As a result, the playlist will only show a limited number of tracks but, while playing back, WavePlayer will automatically scroll up or down to make sure the current track is always visible.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-1490","post","type-post","status-publish","format-standard","hentry","category-docs"],"_links":{"self":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts\/1490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/comments?post=1490"}],"version-history":[{"count":0,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts\/1490\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/media?parent=1490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/categories?post=1490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/tags?post=1490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}