Hallo zusammen,
ich bin gerade dabei einen Zeitplaner zu bauen. Das Ganze sieht ungefähr so aus:
[Only registered and activated users can see links. Click Here To Register...]
Solange ich nicht maximale Breite nicht überschreite, funktioniert das wunderbar. Die Timeline scrollt mit und die Offset passen alle.
Jetzt möchte ich aber, wie man oben sieht, noch Gruppen mit einbauen und somit auch horizontal scrollen und möglichst nur CSS (Flex) ist erlaubt. Kann mir hier jemand helfen?
Mein bisherige Code sieht so aus (ist durch das ganze rum probieren nicht mehr der schönste):
HTML
CSS
Grüße
Lazeboy
ich bin gerade dabei einen Zeitplaner zu bauen. Das Ganze sieht ungefähr so aus:
[Only registered and activated users can see links. Click Here To Register...]
Solange ich nicht maximale Breite nicht überschreite, funktioniert das wunderbar. Die Timeline scrollt mit und die Offset passen alle.
Jetzt möchte ich aber, wie man oben sieht, noch Gruppen mit einbauen und somit auch horizontal scrollen und möglichst nur CSS (Flex) ist erlaubt. Kann mir hier jemand helfen?
Mein bisherige Code sieht so aus (ist durch das ganze rum probieren nicht mehr der schönste):
HTML
Code:
<div [hidden]="selectedView.id != View.Day" class="scheduler-day" fill-height>
<div class="calendar-header">
<div class="weekday-container">
<!-- <span class="weekday">KW<br>{{ calendarData.week }}</span> -->
</div>
<ul>
<li><span>Gruppe 1</span></li>
<li><span>Gruppe 2</span></li>
</ul>
</div>
<div class="calendar-main" fill-height>
<div class="calendar-sidebar">
<ul class="timeline">
<li *ngFor="let t of times"><span>{{ t }}</span></li>
</ul>
</div>
<div class="calendar-body">
<div class="calendar-events">
<ul class="calendar-grid">
<li *ngFor="let t of times"></li>
</ul>
</div>
</div>
</div>
</div>
Code:
.scheduler-day {
//TODO: Warum funktioniert flex nicht, aber box funktioniert...CHROME BUG?
// display: flex;
display: box;
flex-direction: column;
background: color($colors, background-secondary);
color: color($colors, text-primary);
background: lightcyan;
overflow: hidden !important;
.calendar-header {
display: flex;
height: $scheduler-calendar-header-height;
line-height: $scheduler-calendar-header-height;
width: 100%;
.weekday-container {
padding: 0;
margin: 0;
text-align: center;
width: $scheduler-calendar-sidebar-width;
height: $scheduler-calendar-header-height;
line-height: $scheduler-calendar-header-height;
border-left: 1px solid color($colors, border-primary);
border-bottom: 1px solid color($colors, border-primary);
.weekday {
display: inline-block;
padding: 0 1.25rem;
vertical-align: middle;
line-height: 1.5rem;
font-size: 0.8rem;
}
.timeline-fix-width {
height: 0;
visibility: hidden;
overflow-y: hidden;
}
}
ul {
display: flex;
flex: 1 0 auto;
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
flex: 1 0 auto;
min-width: 60%;
height: $scheduler-calendar-header-height;
line-height: $scheduler-calendar-header-height;
text-align: center;
border-bottom: 1px solid color($colors, border-primary);
border-left: 1px solid color($colors, border-primary);
}
}
}
.calendar-main {
flex: 1 0 auto;
display: flex;
width: 100%;
max-width: 100%;
.calendar-sidebar {
width: $scheduler-calendar-sidebar-width;
border-left: 1px solid color($colors, border-primary);
.timeline {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 0 1.25rem;
height: $scheduler-calendar-row-height;
line-height: $scheduler-calendar-row-height;
span {
display: inline-block;
font-size: 0.8rem;
transform: translateY(50%);
}
}
}
}
.calendar-body {
flex: 1 0 auto;
.calendar-events {
.calendar-grid {
list-style: none;
margin: 0;
padding: 0;
li {
width: 0;
height: $scheduler-calendar-row-height;
&:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: color($colors, border-primary);
}
&:first-of-type:after {
height: 0;
}
}
}
.calendar-header-width-fix {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
height: 0;
width: 500px;
visibility: hidden;
}
}
}
}
}
}
Lazeboy