javascript - Slick Carousel - Container width not working -

-

i have started using slick carousel plugin website working on , reason, if set wrapper around targeted element slick carousel, width not honoured unless set pixels not option when need width grow size of parent element.

i using bootstrap in case helps.

html

<div class="col-md-6 col-xs-12"> <div class="group-filter">     <span class="title">group filter</span>     <div class="group-slick-cell">         <div class="group-slick-wrapper">             <div class="group-slick">                 <div><button class="btn btn-groups">group 1</button></div>                 <div><button class="btn btn-groups">group 2 more text</button></div>                 <div><button class="btn btn-groups">group 3</button></div>                 <div><button class="btn btn-groups">group 4 text</button></div>             </div>         </div>     </div> </div>

less:

.group-filter {     display: table;     width: 100%;      .title {         display: table-cell;         font-size: 16px;         color: @text-color;         padding: 0 5px;         vertical-align: middle;         width: 1%;     }      .group-slick-cell {         display: table-cell;         width: 100%;         height: 31px;          .group-slick-wrapper {             margin-left: 17px;             width: 100%              .btn {                 margin: 0 5px;             }         }     } }

js:

groupslick.slick({     infinite: true,     dots: false,     speed: 200,     slidestoshow: 3,     slidestoscroll: 1,     variablewidth: true,     centermode: true,     draggable: false,     accessibility: false });

here's jsfiddle of actual issue. child of parent container pushing width out 20,000px wider bootstrap should going to.

https://jsfiddle.net/wqvth9ms/

for might looking similar fix this, have created update original jsfiddle below might able out.

i changed display: table-cell float: left , added table-layout: fixed wrapper element.

https://jsfiddle.net/wqvth9ms/1/


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more