Горизонтальная полоса прокрутки не работает, даже когда я устанавливаю фиксированную ширину для моего родителя div? - PullRequest
Новая
       8

Горизонтальная полоса прокрутки не работает, даже когда я устанавливаю фиксированную ширину для моего родителя div?

0 голосов
/ 10 марта 2019

в качестве вопроса упоминается, моя горизонтальная полоса прокрутки не работает, я работаю над приложением реагирования, я пытаюсь создать небольшой компонент TableData, вот мой отрендеренный код jsx: 

<table>
        <div className="co-table">
                <div className="co-table__long">
                    <div className="co-table__header">
                        <div className="co-table__header--col">
                            {" "}
                            <span>Date d'operation</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Type de Mouvement</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Montant ($$) </span>{" "}
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                </div>
            </div>
</table>

Я знаю, что это так много кода, но это повторяющийся код, я подробно объясню, чего я хочу достичь, вот мой файл SASS: 

.co-table {
width:300px;
height: 150px;


&__long {
    width: 300px;
    height: 150px;
    overflow-x: scroll;
    &:after {
        content: "";
        clear: both;
    }
}

&__header {
    display:inline-block;
    width:100px;
    height: 150px;
    float: left;

    &--col {
        width:100px;
        height: 50px;
        background: #333;
        color:white;
        span {
            font-size:13px;
            padding:10px 0;
        }
    }
}


&__corps {
    display:inline-block;
    float: left;
    height: 150px;
    &--head {
        width:60px;
        height: 150px;
        background:lightgray;
        float: left;

    }
    &--row {
        float: left;
        width:100px;
        height: 150px;
    }
    &--column {
        width:100px;
        height: 50px;
        border:1px solid lightblue;
    }
}

&:after {
    content: "";
    clear:both;
}


}

Как вы можете видеть в моем файле SASS, я пытаюсь добавить горизонтальную полосу прокрутки к div с классом **** co-table__long ****, но это не работает, у div есть дочерние элементы и их общая ширина больше чем 700px, и я установил ширину моего родителя в 300 px, чтобы я мог видеть горизонтальную полосу прокрутки .. вместо этого я вижу вертикальную, я вижу также горизонтальную, но не работающую ..

Вот что я ищу: enter image description here

Вот ссылка на мою работу, надеюсь, она будет работать:

https://codesandbox.io/s/y03696lrl9

Любая помощь будет высоко ценится.

1 Ответ

1 голос
/ 10 марта 2019

измените свой CSS для "co-table__long" из этого: 

.co-table__long {    
    height: 150px;
    overflow-x: scroll;
}

в это: 

.co-table__long {    
    max-width: 300px;
    height: 150px;
    overflow: auto;
}

вам нужно установить 'width / max-width' в элементе, для которого вы используете 'overflow'

проверить эту ссылку и ссылку на код

...