spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

How to create a horizontal calendar with nested lists?


I have completely rewritten your CSS, because it is hard to determine what look you want to go for. I have chosen to use the latest CSS3 flexbox specification — simply because it allows me to reposition the month relative to the dates without using position, which will be extremely messy. You might want to use vendor prefixes to ensure maximal cross-browser support for CSS3 flexbox.

See proof-of-concept fiddle: http://jsfiddle.net/teddyrised/g6u52vhn/4/. The only changes I made to your markup is to wrap the months in <span> tags ;)

I have taken the liberty to add borders so you can clearly distinguish the different elements.

.dates {
    display: block;
    position: absolute;
    left: 5%;
    width: 90%;
    height: 200px;
    overflow: auto;
}

/* General list styles */
.dates ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    white-space: nowrap;
}
.dates li {
    display: flex;
    flex-flow: row wrap;
    flex-shrink: 0;
    flex-grow: 1;
}

/* Specific styles */
.dates > ol > li {
    border: 1px solid #000;
}
.dates .month span {
    border: 1px solid #999;
    display: block;
    order: 2;
    width: 100%;
}
.dates .month ol {
    order: 1;
}
.dates .month ol li {
    border: 1px solid #999;
}

However, if you need to support older browsers, you might want to fallback to the good old <table> element, which I feel would be sufficient and valid.


Categories : CSS

Related to : How to create a horizontal calendar with nested lists?
Common Lisp - Collect 'firsts' from nested lists of lists
How about something like this? (defun immediate-children (object &aux (result '())) (labels ((f (object) (cond ((consp object) (push (list* (first object) (mapcar #'f (rest object))) result) (first object)) (t object)))) (f object) result)) CL-USER> (

Categories : List
Retrieving instances from event lists in google calendar api
When first request is made(that is to gapi.client.calendar.events.list) as there is nothing outside the method it waits until it gets response from the server. Once it enters into the for loop, it starts executing,when control reaches to the request2.execute(function(resp2),request will be sent to gapi.client.calendar.events.instances and request method won't wait for the server response as the ex

Categories : Javascript
Ruby on Rails: nested attributes, create a model and its nested attributes use the main model to create more nested attribute models using remote
I tried the following in the create action of order controller and it worked. If anyone have a better solution please let me know. def create if session[:order_id] @order = Order.find(session[:order_id]) @order.update_attributes(item_params) else @order = Order.new(order_params) @order.save end session[:order_id] = @order.id respond_to do |forma

Categories : Ruby On Rails
Best way to extract elements from nested lists
You can use a list comprehension: >>> lst = [[[12, 15, 0], [13, 15, 25], [14, 15, 25], [16, 16, 66], [18, 15, 55]]] >>> [x[1] for x in lst[0]] [15, 15, 15, 16, 15] >>> The above is equivalent to: lst = [[[12, 15, 0], [13, 15, 25], [14, 15, 25], [16, 16, 66], [18, 15, 55]]] final_list = [] for sub_list in lst[0]: final_list.append(sub_list[1]) except that it is

Categories : Python
Finding the average of columns from nested lists in a dictionary's value
Assuming value in dictionary contains list of only two elements (which are again lists): d = {'dog': [['4.1', '7.0', 'dog'], ['1.2', '3.4', 'dog']], 'cat': [['1', '8.2', '5.501', 'cat'], ['6.5', '8', '9.1', 'cat']]} avg_dict = {} for key in d: avg_list = [] i = 0 while (i < len(d[key][0]) - 1): avg_list.append((float(d[key][0][i]) + float(d[key][1][i])) /2.0) i +

Categories : Python
Recently Add
Ignore CSS declaration on a specific control
Mark space for :after content non-breaking
2 inline images - 1 centered and 1 right using Bootstrap
Bootstrap - three sibling col divs, is this layout possible?
jquery mobile-vertically center two lines of button text
Change footer content in magento
CSS help - Shopify Blockshop theme collection page alt image hover changes
SVG filter feGaussianBlur in percentage
How to remove arrow from select element
how to align sub tags in parent tag
Attribute name "onclick" associated with an element type "Label" must be followed by the ' = ' character
CSS : Fixing up/down arrow CSS
Flip horizontally only one background image
Recent posts in footer widget not aligning
Change fielderror style for a specific form only
Creating disable opacity bootstrap 3?
How to display two nav bars in bootstrap while browsing through mobile and displaying content on it without use of button that bootstrap provides
Why css & image get distorted on URL rewrite in asp.net?
changing css class variables
CSS Scrolling Background Image
Custom Checkbox Not Working in Chrome on Windows
Facebook like box showing only partially
Gulp sass output paths for css.map files Google Chrome can't resolve path
background-image not displaying
Undefined variable in SASS, even though the variable is defined above
css - start new line when we reach width
How to create a horizontal calendar with nested lists?
See current column category used in Bootstrap 3
CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?
Responsive Centered Image: Vertical Resizing - NOT
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.