I have a navigation (Sample Wireframe) which has a colored background. The nav items are in a list, and at different resolutions. As the font size changes the nav container's height also expands or contracts. However, I want one of these items (the middle one) to have a larger height and break the bounds of the container.
Is the cleanest way to do this to set the height of the container to be equal to the height of the other buttons using javascript, or will that still always cut off the larger nav item? I can't seem to break out one of the items from the bounds of the container without doing absolute positioning which completely takes it out of the flow of the other list items, and I want the height of the container to stay consistent with the rest of the buttons. Any thoughts?
Create the item with position:absolute set as a style property.
You may need to create another element next to it with the regular height that will be hidden behind it to keep the width reserved.
position:absolute
will do the trick but also consider about having an extra div (nested div) so it isolates from the bigger item.
As others said, position: absolute. It is important to note that an absolutely positioned element will have its origin point at the nearest element with position: relative (or the root element), so if you set the parent container to relative, the absolute menu item will start there.
Related
I am creating a chat application in Angular and I am trying to set up the UI for it. I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar. This div should be 100% the size of the parent div. As you click the button to add data the div grows. Even if I set a height in px or percent format the div still grows.
The page you link won't load but here are the basics to make a scrollable element:
HTML / JS Structure
Make an outer container div
Make an inner container div (this will be the "scroll wrapper")
Append the inner container to the outer container
Insert whatever you need into the inner container (you can use something like insertAdjacentHtml or whatever works for your specific situation)
This order of steps in particular will work well for a scenario where the contents are dynamically changing.
CSS
For the outer container
Set a fixed value for width and set height: auto
Set a border-radius if you want circular edges
Set overflow: hidden to keep the scroll wrapper's corners from popping out
You will probably want some padding
For the inner container
Set position: relative
Set overflow-y: auto and overflow-x: hidden so that you can scroll up and down, but not side to side
For the desired overflow behavior, you need to set width: 100% and set fixed values for max-height and min-height. (max-height decides when things will start to overflow ie. make a scroll bar)
You will want max-height and min-height to be less than the outer container's fixed width + any padding, etc. it may have.
I'm experimenting with making a nicer grid/list container. I'll have a bunch of objects to be displayed in a container, and I want to see them either in list view (where each item takes up 100% of the width and, say, 70px height) or grid view (where each item takes up, say, 100px width and 100px height). I made them all display: inline-block too, since they'll automatically position themselves appropriately (assuming the container div is the same width as one list item, which it is).
I want to make a smooth transition between them, so I made a fiddle to experiment. This does a good job in animating the size changes for each div, but there's a jarring height transition whenever a row of objects gets either too big or too small for its current row and adds/removes an object. My question is; is there a simple way to animate the objects to their end positions? For example, the sixth object which is at the bottom of the list view would reposition itself to the bottom right of the container in grid view.
I would like to float a set of divs to make a fluid layout. And I would love to do it with pure CSS and no js if possible for performance/complexity reasons.
Currently, we have 3 divs per row and the surrounding element stretches vertically to accommodate the the tallest div. But of course when I make the page narrower or wider, I always have 3 divs per row.
With floated divs that don't have row containers, it looks great as long as all the divs have the same height. But if the 2nd div in a 2-div row is shorter than the first, then the next row's 1st div gets 'stuck' to the right of that 1st taller div, leaving the first spot in the 2nd row empty.
A solution might be to bring back row divs and use javascript to shuffle item divs between them, but that might be complicated and error-prone. But maybe that's the only possibility.
The one thing I can't do is use fixed height for the item divs, because that would require setting the fixed height large enough for the largest possible item div, which would leave a bunch of empty space for every other div.
I guess another possibility might be using fixed height, then use js to adjust those heights to eliminate extra space.
Make the display:inline-block and remove the float. Height will become optional as well, they'd just align to the tallest one.
If possible try switching to flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox has great visuals to illustrate how various flex styles work.
For example, you could use flex-wrap: wrap; to handle the case when the page becomes too narrow, and use align-items: stretch so they all have the same height
I have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.
Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.
Edit:
Basic fiddle: http://jsfiddle.net/9AXS4/4/
Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()
If your pages, as you call them, are of fixed width and height, then you can set their container to be position:relative and also have the width and height of the pages..
.container{
position:relative;
width:500px; /*the total width of a page, including padding and borders*/
height:400px; /*the total height of a page, including padding and borders*/
}
This way the container element will handle the pushing around of the other elements
Here is your corrected fiddle: http://jsfiddle.net/gaby/9AXS4/2/
(the width/height of the container must account for paddings and border on the page elements)
Also you were targeting the container with .pagecontainer instead of #pagecontainer (since you used an id)
Update (after comment about arbitrary heights..)
Since your pages height is not fixed, you will need to resort to jQuery to resize the container..
Here is a full demo : http://jsfiddle.net/gaby/9AXS4/7/
The divs can't be positioned absolute in relation to each other, but they can be positioned absolutely in relation to an outer div. The container that holds the page divs should have position: relative in order to contain the inner page divs that are absolutely positioned.
If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want to allow for scrolling. If you are going to use the overflow property, be sure to include a height and width so the browser knows where the overflow should be.
http://jsfiddle.net/vkTXs/
$(".page").each(function(){
jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
jQuery(this)
.parent().fadeOut()
.next().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
$(".back").click(function() {
jQuery(this)
.parent().fadeOut()
.prev().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
function resizeContainer(page){
// get height of next page
var newPageHeight = $(page).height();
// add padding and border
newPageHeight = newPageHeight + 14;
$('#pagecontainer').height(newPageHeight);
}
I have a container div, and numerous elements inside of it (i.e. spans, img, divs, etc).
I would like the container div to scroll naturally if its content becomes too large. However, there is ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large.
Not even sure if this is possible.
Thanks in advance!
PS. No jQuery please! :)
Lets say this "ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large." is div#inner. You can set a max-width or max-height to it and make it overflow:hidden so once it reaches the max size, it will stop growing and hide the overflowing inner content.