I've built a small layout using flex and chunks form Bootstrap as well as a mini grid system but I'm having issues with situations where the children of that flexbox are not tall enough to actually fill it. In my case, if you go ahead and inspect the .demo-install-components, you can see that it has a higher height than its children. Surprisingly, if I add just another item .install-component-individual to the mix, it's fixed or if I remove the check icon .installed-component-check. To me, this smells very, very bad. It looks like this:
Here's the code (sorry for it being so long and on jsfiddle, wanted to provide everything I have):
JSFiddle code.
What exactly am I missing here? I feel as if my knowledge of flexbox isn't complete.
Margin from #components-to-install-list ends up under your container.
By removing the width and margin from #components-to-install-list (line 986-987 from CSS), the space underneath will disappear:
Related
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I have barely used anything other than vanilla CSS but would really like to do a couple things that aren't working well now:
I have an inner border inside a div, which I want to actually border the inside of the encapsulating div's border (double border). However with window resizing, the inner border will sometimes have too large/small width/height, even when using a measurement like % or vh/vw. I need the inner border (just a div with a border right now) to always stretch/shrink to fit snug right next to the parent border.
Similarly (notoriously) with centering, I imagine there must be a library with the ability to easily center elements vertically and horizontally. Generally I use flex box but would love something that works more consistently, elegantly and intuitively.
What say ye?
I think you're talking about a CSS framework, they help out a lot, especially when working on a major project. I would check out Twitter Bootstrap or Google's Material Design, I personally use mdbootstrap, which is a 3rd party hybrid of the two.
You could give Tacit a try for this particular need.
Tacit is a class-less CSS framework were all you need is just a single <link> statement in your HTML and the web page will have a complete and finished look.
The centering of elements vertically and horizontally come out of the box, and you can skip the usage of <div> elements or the work of defining classes for your elements.
As a side note, here are a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/
I am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I'm sort of new at Web Design, I'm getting there, though. But I'm still having trouble with elastic layouts and floats. I think that's where my problem with this page lies but I'm too inexperienced to understand it.
Here's my problems illustrated:
https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg
Here's a fiddle with my code:
http://jsfiddle.net/C3Dw2/1/
This is what it SHOULD look like:
http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg
I also want to have the right scrolling section fit in it's parent div. Right now, it's flowing out of it.
Ugh.
Any help would be awesome.
EDIT
The only issue remaining now is the icons not staying in their parent divs.
http://jsfiddle.net/xehMG/2/
See the fiddle for code and demo:
Fiddle: http://jsfiddle.net/C3Dw2/4
Demo: http://jsfiddle.net/C3Dw2/4/embedded/result/
see screen shot for output:
Set min-height on each of the elements that u've given height and width in percentage.Percentage will be effective only when the resolution is big enf to encompass ur children elements.
If you want to use percentages - note the min-width required for their children and set that min-width for its parent.Also use overflow:hidden|scroll|auto as a fall back to control the overflow of the children out of its parent.
I find myself placing a lot of divs, images and content in general with position:relative to stick to the design I'm following.
For example if I wanted to place a form closer to the top I'd put in :
.form_class{
position:relative;
bottom:150px;
}
Since the element keeps its position in the flux, I'd then have to put every other element upwards of 150px with position:relative as to keep the gap closed.
I feel like this is sloppy programming, how do real web integrators position their elements ?
Thanks in advance.
There is a potential problem with using relative positioning.
If you are using the relative positioning to circumvent a problem with a gap, the problem is still there in the background. If the gap comes from a margin for example, then the margin is still there. If you don't know where the margin comes from, you don't know if it's the same in all browsers, and you don't know if any seemingly unrelated changes in the markup might change the margin.
Also, as you mention, you are just moving the gap from the top of the element to the bottom of the element, so you have to keep adjusting all the elements that follow. With each adjustment you are potentially adding another level of insecurity, where the layout might break in another browser.
Most browsers have a developer tool, where you can inspect an element to see exactly what CSS is applied to the element, and what the margins and padding are. You can use that to find out where gaps come from, so that you can remove them at the source instead of circumventing them.
There are a lot of ways to position elements, from margins and paddings, absolute positioning, floats, parent containers, explicit widths and heights. Without seeing your markup it's hard to critic but usually there are better ways than relative positioning. If you want to post some markup try http://jsfiddle.net