CSS snippets

css_crafts.md

Show an indicator and change the horizontal scrollbar styles when using the BootStrap .table-responsive class.

We change the styling of the horizontal scrollbar in our responsive table and also add a text indicating that the user can scroll horizontaly. The Text indicator is only visible in mobile devices.

/* BS Responsive table indicator */
::-webkit-scrollbar {
    height: 6px;            /* height of horizontal scrollbar */
    border: 1px solid #333; /* border of horizontal scrollbar */
    background: #333;       /* bg color of horizontal scrollbar */
}

::-webkit-scrollbar-thumb:horizontal{
    background: #fe5621; /* bg of horizontal scrollbar thumb */
    border-radius: 10px; /* border radius of horizontal scrollbar thumb */
}

@media screen and (max-width: 767px) {
	/* .article-content is domain specific. Not necessary, but we add it for specificity */
	.article-content .table-responsive {
		position: relative;
		padding-bottom: 5px;
	}

	.article-content .table-responsive:after {
		content: "* Σύρετε τον πίνακα δεξιά/αριστερά (⟷) για να δείτε το περιεχόμενό του";
		position: absolute;
		bottom: 0px;
		padding: 0 10px;
		font-size: 12px;
		font-weight: 600;
		word-break: normal;
		max-width: 100%;
	}

	.article-content .table-responsive > .table{
		border-bottom: 1px solid #ddd;
		position: relative;
		margin-bottom: 45px;
	}
}