In a typical chat bot window, or messenger window, when you type in a new message it appears at the bottom of the chat history flow, and everything else in the list goes up - so user is always able to see the last message. And when the history of a chat becomes longer, the chat window itself doesn't grow endlessly - just the older items are pushed higher and visually disappear (although you can scroll back to them).
I tried to imitate this behaviour using flex wrapper and flex-direction: column-reverse for a 'chat history' div inside, but I can't figure it out.
Here is my attempt: https://codepen.io/chapkovski/full/gOOKGwJ
Now (a) the 'chat history' or whatever the content is there, is shown from the top, and when you type a new element there, the window just 'expands'
Any links or hints to the right direction would be appreciated
This is your structure
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
All you need to do is add this css
ul {
display: flex;
flex-direction: column-reverse;
}
This will tell ul element to be flex and display your children in column (one above another) and in reversed order (bottom will go first).
I hope it helped :)
Related
Lets say I want to have a wrapper element which displays one element which is same width height, but on click it slides to the div next to it, which was offscreen before...
Let me draw this real quick:
Drawing level 9000
So clicking on the right arrow would slide /scroll to the offscreen element.
This is mainly for my modals, which look like this:
<section class="modal--wrapper">
<div class="modal">
/* picture i drew goes here */
</div>
</section>
modal--wrapper is fullscreen width / height 100%, position: fixed, while modal is centered, with max-width being 384px (for mobile purposes)
I know how to write logic for this, using getBoundingClientRect, I just don't know how to make the second element offscreen.
<section class="user">
<section class="user__account">/* ... */</section>
<section class="user__settings">/* ... */</section>
</section>
Where user account would be the stuff I drew, while user settings would be the element offscreen.
I tried setting the "user" class display: flex and overflow: hidden, but the two windows just appear one next to each other, both fully visible. Even if I set account and settings width to 384px (the width of the wrapper), they both appear one next to each other. flex-basis 100% on em doesn't work either. Dunno if position absolute would be helpful and I imagine it would require some hacking doing it like that. If thats the way to go I'm down. Just need a lil help where to start. I tried to position em like this but it just doesn't want to work :\
I used to build stuff like this but for elements that scroll up and down, not left and right...
Using this layout: http://jsfiddle.net/spadez/JBuE6/6/
On the top right I want the green button to site on the same line as the H1 tag on the right side, and so that every new list item sits to the side of the next time.
I think this might be something to do with:
display:block
I haven't been able to get this to work and I dont know if this is even the right approach.
Move the UL before the H1 and you should be in good shape, e.g.
<ul>
<li>Create New</li>
<li>Create New2</li>
<li>Create New3</li>
</ul>
<h1>Title</h1>
Example:
http://jsfiddle.net/52raq/3
If you want a right aligned item to be the same height as a left aligned item you need to put it BEFORE the left aligned item. That should take care of it.
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css
I'm working on a navigation like the image below.
The whole nav is the width of the browser window, but the items are centered to the design.
I haven't worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?
Thanks
I'd go with using a container with a simple background colour and positioning the menu inside of that.
I'll whip up a quick example for you.
UPDATE
Here's a quick example I've just put together: http://jsfiddle.net/aQTRF/
Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you've stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.
I would advise using HTML and CSS over images where possible. It will make the page faster to load.
How about something nice and simple like this?
Use an unordered list
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
Add your styles to #nav for the background