Андрей Гузюк Андрей Гузюк - 1 month ago 14
CSS Question

how to set mCustomScrollbar always left?

I have some problems with mCustomScrollbar initialization.
When i initialize him, his container ( mCSB_container) is jumping to left: -55px; but it should be left: 0; I don't know why. May be somebody have an idea.
Problem image

This is code of container where is mcustomScrollbar initialized

.te-tournament-table-container .te-tournament-table-scrolling {
padding-left: 0;
position: relative;
}


Block what i need to scroll horizontal

.te-tournament-table-container .rounds-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
}


HTML code

<div class="te-tournament-table row mCustomScrollbar _mCS_4 mCS-autoHide" style="position: relative; overflow: visible;"><div id="mCSB_4" class="mCustomScrollBox mCS-minimal mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0"><div id="mCSB_4_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;" dir="ltr">
<div class="te-tournament-table-posa col-md-4 col-xs-6">
<div class="te-users-container">
<div class="te-header-table">
<div class="te-static-name">
<span>Игрок</span>
<span class="rate"></span>
</div>
<div class="te-static-score">
<span>Очки</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=3">player3</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1849</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>2</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=4">Player4</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1712</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>3</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=5">player5</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1255</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>0</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=6">player6</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1622</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>3</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=7">player7</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1536</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>1</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=2">player2</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1420</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1486</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>1</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=1">admin</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">1705</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">2500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>4</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=11">player111</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score">111</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" alt="icon" class="mCS_img_loaded">
</span>
<span class="user-online-score"></span>
</div>
</div>
</div>
<div class="te-user-score">
<span>2</span>
</div>
</div>
</div>
</div>
<div class="te-tournament-table-scrolling col-md-8 col-xs-6 mCustomScrollbar _mCS_3" id="tournament-scroll"><div id="mCSB_3" class="mCustomScrollBox mCS-rounded-dark mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0"><div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 570px;" dir="ltr">

</div><div id="mCSB_3_scrollbar_horizontal" class="mCSB_scrollTools mCSB_3_scrollbar mCS-rounded-dark mCSB_scrollTools_horizontal" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_3_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 14px; display: block; left: 0px;"><div class="mCSB_dragger_bar"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
</div></div><div id="mCSB_4_scrollbar_vertical" class="mCSB_scrollTools mCSB_4_scrollbar mCS-minimal mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_4_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; display: block; height: 352px; max-height: 342px; top: 10px;"><div class="mCSB_dragger_bar" style="line-height: 50px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div>

Answer

please use this css code

.mCSB_scrollTools{
    left:0!important;right:auto!important;
}

but i'm not sure your css class are same as i write in code . if it's not you can change the the class or just put css rules in your css class selector

trry to remove left:-55px form your div

<div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px;  width: 570px;" dir="ltr"> 
Comments