I have an un-ordered list that looks like this on a full size page:
Item 1
Item 2
Item 3
Item 4
Item 5 <some content here>
Item 6
Item 7
Item 8
Item 9
But I want it to go to:
Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9
<some content>
at 100% width of a phone.
I have the list and "other content" in divs doing what I need, but in regards to the list, should I use tables, or is there CSS that I can use with an un-ordered list?
try this code
ul {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
width: 100%;
}
li {
flex: 1;
min-height: 100px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
adjust the height of ul and li to fit your design needs
Try this
li {
display:inline-block;
width:33
}
Related
I would like to render the items horizontally while the page load, refer to following images
<section
tabindex="-1"
class="relative mx-8 mt-10 mb-20 max-w-7xl focus:outline-none sm:mx-16 md:mx-20 lg:mx-24 xl:mx-auto"
>
<ul
class="h-full w-full list-none columns-1 gap-4 space-y-12 overflow-hidden pb-32 md:columns-2 lg:columns-3 lg:gap-8 xl:columns-4"
>
<ExploreCard
v-for="(post, index) in posts.data"
:key="index"
:post="post"
:canLike="this.canLike"
/>
</ul>
</section>
Currently
Expected
Something like this,
https://reactjsexample.com/rendering-columns-from-a-list-of-children-with-horizontal-ordering/
I am looking for a Js, Vue, or CSS solution.
I end up with a package solution and it works perfectly fine!
DaPotatoMan/vue-next-masonry
and this is how it looks like
<masonry
:cols="{ default: 4, 1024: 3, 768: 2, 640: 1 }"
:gutter="{ default: 40, 1024: 30, 768: 20 }"
>
<div v-for="(post, index) in posts.data" :key="index" class="mb-10">
<ExploreCard
v-for="(post, index) in posts.data"
:key="index"
:post="post"
:canLike="this.canLike"
/>
</div>
</masonry>
In this way, all the post is rendered in horizontal order !
I would advise that you use tailwind class utility of grid to create a grid container:
https://tailwindcss.com/docs/display#:~:text=Use%20grid%20to%20create%20a%20grid%20container.
This is an answer with pure CSS from #haltersweb
https://stackoverflow.com/a/37063940/17737657
CSS-only masonry layout
display: inline-block
ul {
margin-left: .25em;
padding-left: 0;
list-style: none;
}
li {
margin-left: 0;
padding-left: 0;
display: inline-block;
width: 30%;
vertical-align: top;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
</ul>
display: flex
ul {
margin-left: .25em;
padding-left: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
li {
margin-left: 0;
padding-left: 0;
width: 33.3%;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
</ul>
I am attempting to use two selectable lists with the same selectable class, I want to toggle all the items irrespective of the parent list when a selection is made.
Currently when I select an item, only the selections from the same list get toggled/unselected, but the selected item from the other list remains selected.
Is there any way to have these as two separate lists but behave as the same one, for this specific function?
Any help would be appreciated. Thank You.
$( ".selectable" ).selectable();
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
div {border:1px solid black;}
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.selectable { list-style-type: none; margin: 0; width: 60%; }
.selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<div id="div1">
<h4>List 1</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="div2">
<h4>List 2</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
I suppose what I was trying to achieve here is what is defined under a different widget, you would call menu.
Changing the script to:
$(".selectable").menu();
gave the desired result.
I have a scrollable dropdown menu and I want to keep the last item fixed and always visible on top while all the other items would scroll. However, with my solution it's really jumpy. Here's what I have so far:
HTML:
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li class="fixed">Item 10</li> <!-- this item will be fixed and always on top -->
</ul>
Javascript:
this.$('.menu').on('scroll', function() {
if (stickyItem = $('.fixed')) {
//get the y position of the parent
topHeight = stickyItem.parent().offset().top;
//how far apart the sticky item should always be from the top of the bar
heightDiff = stickyItem.parent().height() - stickyItem.height();
if ((stickyItem.offset().top - topHeight) < heightDiff) {
heightApply = heightDiff + ( heightDiff - (stickyItem.offset().top - stickyItem.parent().offset().top));
stickyItem.css('top', (heightApply)+'px');
}
}
});
CSS:
ul li.fixed {
position: absolute;
bottom: 0;
}
Is there an easier way to accomplish what I'm trying to do? Thanks!
I have not tested anywhere besides chrome, but here's a pure CSS solution for your problem:
html,body{height:100%; margin:0; padding:0}
ul {margin: 0; padding:0; height:auto;
/*this padding bottom allows the penultimate element to be displayed*/
padding-bottom:39px}
ul li {padding:10px; background:#eee; color:#333;
font-family:sans-serif; border-bottom:1px solid #CCC; }
ul li.fixed { /*you could also use the :last pseudo selector*/
width:100%;
position: fixed;
bottom: 0;
background:lightblue;
}
https://jsfiddle.net/patareco/kb99u78p/1/
Hope it does what you intended.
I have a menu-submenu-subsubmenu construction in HTML like this:
<menu>
<li>Item 1</li>
<li><ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul>
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
...using whit this css formating:
menu {
display: block;
width: 200px;
}
/* hide subitems */
menu li ul,
menu li ul li ul {
display: none;
position: absolute;
}
/* set up positions */
menu li ul {
left: 200px;
width: 200px;
}
menu li ul li ul {
left: 400px;
width: 200px;
}
I use this jQuery code:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
$('menu li a').mouseenter(function() {
$(this).parent().children('ul').show();
}).mouseleave(function() {
$(this).parent().children('ul').hide();
});
});
How can I detect mouse is leaving the element to their child? Or how can I get the child element to stay if it's necessary?
Change your code to be like this:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
var time = new Date().getTime();
$(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
var leaveTime = new Date().getTime();
var $this = $(this);
window.setTimeout(function () {
var $ul = $this.parent().find('ul');
var beginTime = $ul.data('showing-time') || 0;
if (leaveTime > beginTime) {
$this.parent().find('ul').hide().data('showing-time', 0);
}
}, 100);
});
});
Hope this helps.
update
Code updated.
I suggest just put the sub menus next to the parent menu item(here, means li > a element) to get a better result.
Here's how I would go about it. You don't need javascript at all, at least not for simple hiding/showing. But, if you want to add delays, I would strongly suggest using jquery only to add/remove appropriate css classes with a settimeout.
css:
.menu {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
}
.menu li:hover > .submenu, .submenu.show {
display: inline-block;
}
html:
<ul class="menu">
<li>Item 1</li>
<li><ul class="submenu">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul class="submenu">
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
js:
$('body').on('mouseleave','.submenu', function(e) {
var jTarget = $(e.currentTarget).addClass('show');
setTimeout(function() {
jTarget.removeClass('show');
}, 500);
})
Check out this jsfiddle with the js delay:
http://jsfiddle.net/LxL4N/1/
Guys, I have the following HTML. Is it possible for the #underdiv to scroll under the #topdiv? I want to achieve the effect of having a list of items and to be able to scroll it up and down while keeping the #topdiv always visible on top of it. Can it be done just with the CSS or do I have to add some Javascript magic? I also have JQuery and JQueryMobile (as this is meant for an iOS device) included in the file but I kept them out to make the HTML look simpler.
Thanks in advance for helping me out!
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
#underdiv {
background-color: red;
position: relative;
top: -40px;
width: 80%;
margin: 0 auto;
}
#topdiv {
background-color: yellow;
}
</style>
</head>
<body>
<div id="topdiv">
<h1>Random title</h1>
<p>This is a random paragraph bla bla bla bla yada yada yada</p>
</div>
<div id="underdiv">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</div>
</body>
</html>
it's possible, though the scrollbar disappears under too;
ul {
margin: 0;
padding: 40px 0 0 30px;
}
#underdiv {
background-color: red;
width: 80%;
margin: 0 auto;
height: 200px;
overflow: auto;
margin-top: -40px;
}
#topdiv {
background-color: yellow;
padding: 1px; /* to stop margins collapsing */
position: relative;
}
remove position:relative from underiv and add position:fixed to topdiv.
Look at the resut here