So I have a large form and have grouped the like elements in fieldsets but all the fieldsets have different heights. I float the fieldsets to the left so any extra fieldsets will be pushed underneath (think the next row when reaching the edge of the screen).
How do I get all the field sets to have the same height as the tallest fieldset in that row?
fieldset {
float: left;
width: 278px;
margin: 10px;
height: inherit;
display: inline;
border: 1px solid #000000;
}
This is somewhat working except the height issue. I don't want a true grid but a dynamic grid layout, so if someone with a 800x600 screen looks at the site and I have nine fieldsets on the page they should see something like a 3x3 grid. If you have a larger screen you might see something like a 5x4 grid.
Your going to have to make some choices, as this cant be done exactly the way you want using pure CSS. With Javascript you could make this work, but not pure CSS.
With that in mind. You could replace the fieldsets with scrollable divs to get a CSS only version of what you want (note the full contents of the div would not be displayed in all cases. The user may need to scroll). Example:
<style>
div {
float: left;
width: 278px;
margin: 10px;
height: 100px;
border: 1px solid #000000;
overflow: auto;
}
</style>
You can try it out here
Finally the other choice would be to manipulate the height of the fieldsets using javascript after the elements have loaded.
Related
I was wondering if there is any way to style textArea, placed into a div with css columns properties.
My textArea styled with a border and has resizable height property. So I want users to type into text area and when its divided into two columns, first column doesn't lose its bottom border and second doesn't lose its top border.
.wrapper {
height: 400px;
width: 700px;
padding: 10px;
border: 1px solid;
overflow: hidden;
-moz-columns: 2 200px;
-webkit-columns: 2 200px;
}
textarea {
height: 700px;
width: 300px;
padding: 5px;
border: 3px solid green;
outline:none;
}
<div class="wrapper">
<textarea></textarea>
</div>
For some reasons I try to avoid solutions based on the 'contenteditable' parameter.
At the same time it seems that css-columns doesn't affect the textArea in Firefox.
Here is my plunker, so u can run it both in Firefox and Chrome to compare.
Because your textarea is a single element, I don't think you're going to be able to place arbitrary borders where it splits between the columns. You could consider a pair of floating div elements that each contain a narrow green rule to fake the top and bottom borders, but that would be defeated if you continue to allow your users to resize the textarea element.
Also, based on what I can see, while Chrome happily splits your textarea between the columns, Firefox is not so generous. Both, however, split a regular paragraph of text with no issues: http://jsfiddle.net/brightmatrix/r2hFj/.
May I ask why you want to split a textarea this way?
I would like to position 8 divs in the following way:
Here is my JSfiddle which has all the div code: http://jsfiddle.net/XRTh5/
What I would like to do is make the div's behave the same way as on this website with it's icons" http://cyberdust.com/. See how when you re-size the page, the icons shrink and get smaller instead of not changing?
Thanks for the help. I would like to do this only using `div's and not using tables or any old technology like that.
Strongly suggest you look at using a framework to accomplish this just as the reference website uses.
But in general it can be accomplished with css and the #media (min-width: 768px) {}
which applies different css styles when the browser viewpoint/window is resized.
There are a couple but for your specific need they use bootstrap.js http://getbootstrap.com/
Use float: left; to float your items, and percentage based widths for a layout that scales.
Remove heights from your container elements to allow them to expand and fit their contents.
Example: http://jsfiddle.net/XRTh5/37/
The site that you referenced uses media queries to adjust styles based on window width. That would also work, but percentages may be a simpler way of achieving your desired result.
UPDATE: using a neat little trick with percentage-based padding and position: absolute, you can cause the grid items to maintain an aspect ratio. See fiddle link above.
The example website you posted is using breakpoints to set the size of the icons to specific values depending on the size of the users viewport.
read up on media queries and you should be able to replicate this very easily.
You could also set the size of your icons to a percentage value rather than a fixed width or height and this would scale dynamically but will not re-flow very gracefully.
Something else to investigate is flexbox as this will flex to fit the available space quite nicely but isn't 100% supported on all browsers.
Hope this helps
if you don't need the gap in between the the rows then a few simple tweaks to your css will do:
.main {
display:table;
border-spacing:50px;
}
.row {
display:table-row;
}
.icon {
display:table-cell;
}
Example
Otherwise you just need to add and extra closing and opening main div to get the middle gap:
If you do need the gap in the middle
You need to add the following CSS:
* { box-sizing: border-box; } //border will not add to element width
.icon {
width: 25%;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left; //objects will sit next to eachother
}
Also, you way want to set this all up using % values for width/height so that you can get the responsive resizing effect
In answer to your first question, how to make the div, use float:left on the icons to make them fit horizontally.
Use relative width's to make them shrink. To make them shrink and realign perfectly, you need to use media queries, which I'll not go into right now. Here's the updated css
.main {
height: 400px;
width: 100%;/*relative widths*/
background-color: green;
}
.row {
width: 100%;/*relative widths*/
background-color: blue;
}
.icon {
width: 20%;/*relative widths*/
height: 120px;
background-color: orange;
border: 1px solid black;
float:left;/*fit horizontally*/
}
.row{
clear:both;/*To stop the icons from floating*/
}
jsfiddle: http://jsfiddle.net/mDtjP/
I think that is what you need
.row div{
float:left;
}
Just float de divs
http://jsfiddle.net/XRTh5/15/
try this DEMO i change you code
.main {
background-color: green;
display:inline-block;
}
.row {
background-color: blue;
padding:5px;
}
.icon {
width: 200px;
height: 150px;
background-color: orange;
border: 1px solid black;
display:inline-block;
}
You should set float: left like here: http://jsfiddle.net/XRTh5/10/
.icon {
width: 198px;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left;
}
Also remember about decreasing div size to 198px if you want to fit them in 800px (you have 2px border).
I've spent a great deal of time and effort on toying and researching this, but I cannot figure out how to perfectly align the column headers with a scrollable table body in HTML. There are other solutions and techniques posted on here and at random places on the web, but they all yielded inconsistent results, especially with random amounts of data.
Here's the JSFiddle.
Note that I have custom CSS applied, but also Bootstrap's CSS. Please expand the result panel to be big enough for the HTML headers to not wrap.
To summarize the HTML, there are two tables - one for the column headers, one for the data cells. Each is wrapped in a <div>, which allows the cells to be scrollable and sets the width of the columns. To account for the scroll bar sometimes showing up (the data is dynamic and I have no idea how much data there will be), the <div> wrapper around the table cells is set to always show the scroll bar, and the wrapper around the table headers has this CSS applied:
.grid-container .column-wrapper {
width: calc(100% - 16px); /* 16px is the approximate width of the scroll bar */
}
This works on my monitor when the zoom is 100%, but on other monitors, the grid lines are not aligned perfectly - off by maybe 4px. The application that uses these grids uses them extensively, some of which align perfectly while others are off. I unfortunately have not found a pattern for which render correctly and which do not.
I do not want a JavaScript solution - these grids have a lot of JavaScript applied already to make them interactive and sometimes render huge amounts of data (over 7,000 rows) and I don't want to do something funky like looping through the each row, detecting widths, then apply fixes.
Thanks guys, let me know if you need any more information.
EDIT -------------------------------------------------------------------------------------
Our users use Chrome 35.0.1916.153, and I've begun explicitly setting the width of the scrollbar to make sure it's 16px:
::-webkit-scrollbar {
width: 16px;
border: 1px solid #ccc;
}
Again, this works on my monitor, but at the moment I cannot tell the results on others. Here's the updated JSFiddle.
Here is my solution to achieve a perfect alignment of the columns between the header and the scrollable body of a table.
We don't know the exact scrollbar width so :
We make the table header scrollable so that its width is now exactly the same than the body
table.scrollable thead {
width:100%;
overflow-y: scroll;
position: relative; /* for the absolute positioning of 2.*/
}
we mask the header scrolling arrows under 2 pads
table.scrollable thead:before {
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: 0em;
}
table.scrollable thead:after{
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: -1.2em;
}
Here is a sample fiddle using flex css: https://jsfiddle.net/vyp5j257/2/
Or here your fiddle updated: http://jsfiddle.net/9g6xo8L6/1/
calc() can be iffy with cross-browser testing when you need pixel perfect rendering. Try changing the .grid-container .column-wrapper style to something like this:
.grid-container .column-wrapper {
width: 100%;
padding-right: 16px;
}
Here is the demo on JSFiddle.
I am using Twitter's Bootstrap framework - http://twitter.github.com/bootstrap/
What you will see in the stylesheet (on JSFiddle) is at the top are the appropriate classes from Bootstrap, but at the bottom are mine.
On JSFiddle, for some reason, everything doesn't look the way I want it to (I think it could be because of the static values and the smaller window on JSFiddle).
This is how it looks in my app:
However, the issue is that it works when I specify specific widths (in pixels) for everything.
What I want to happen is, the layout stays the same regardless of the size of the browser window (the image doesn't have to resize automagically, although if that can be achieved with no JS that would be cool). So, in theory, the layout wouldn't have broken once I took it into JSFiddle.
Any ideas?
You could do this:
First, get rid of the min-width that is set in the Twitter css
div.container-fluid {
float: bottom;
padding: 0px;
min-width:0; /* add this */
}
Second, give the .content div a fluid width
div.container-fluid .content {
border: 1px black solid;
margin: 0px;
width: 80%; /* adjust this */
float: left;
padding: 10px;
}
Third, float the items in your form
div.row.profile_pic div.span5 {
width: 120px;
float:left;
margin-right:1em;
}
div.span7{
width:40%;
float:left;
}
Of course, you will need to adjust the values. I just picked some random #s.
Example: http://jsfiddle.net/ytSjc/1/
In designing a fluid layout, how do you use borders without ruining the layout.
More specifically, I have a HTML widget which consists of five divs. I would like the five divs to take up all the room in the containing element. I would also like to have a 1px border around each.
I tried:
.box { float: left; height: 100%; width: 100%; border: 1px solid red; }
This doesn't work: there will be an extra 10px in width causing the boxes to wrap. Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.
Whats the proper way to manage the interaction between these elements?
See this article.
Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).
In CSS3, you can switch to a different box model as follows:
box-sizing: border-box;
Browser-specific implementations of this are:
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
This will cause the box sizes to include the element's border and padding. So you can now specify
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width:20%;
border:1px solid red;
float:left
}
and have the five divs take up all the width of the containing element without wrapping.
Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.
Only put width: 100% on the outermost div, and don't put a border on it. If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.
If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):
<div class="one">
<div class="two">
<div class="three">
etc.
</div>
</div>
</div>
<style>
.one {
width: 100%;
}
.two {
border: 1px solid red;
padding: 1px;
background: red;
}
.three {
border: 1px solid red;
background: white;
}
</style>
As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).
Oh boy, I almost hate to mention this, but there is a very easy way to do this in a horizontal bar. It isn't "pixel perfect" except at your minimum width, but is not discernible to the naked eye.
Divide the container div by the number of items. Let's say, you have six nav items with a white border (this is especially good for numbers that don't divide into 100 because it won't be perfect in any case).
Set your total width for each left-floated child div to the correct fraction (using % for left or right margin or padding) so that they equal # 100%. Go ahead and put a 1px border-right on the child divs. For the last div at the right end, either make a second class with no border or just use style='border:none'.
Then, at your minimum width, slowly drop the width of each child div until they fit.
Here is a bit of code from an old page of mine using this method for a liquid page with minimum width of 960px (958 px and a 1px border on each side):
.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}
I think it actually is as close to pixel perfect as you can get at minimum width, and at higher widths although the right-hand div is maybe 4 px wider than the others, you can't tell by looking at it. (Obviously, this wouldn't work if you need a right border on the right-most div, since you'd see a few pixels of background.)
This will get you fairly close but not 100% of the way (pun intended). To give an element 100% height it needs to know "100% of what?". All parent elements must also be given 100% height and this includes the body. Or as the W3C put it: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'." As you can see we also need to give the body "position: absolute;" for the height to be honored. This example also divides the width into five equal columns with borders (and some padding and margin just for fun):
<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
div.column {
height: 100%;
border: 1px solid blue;
margin: 1em;
padding: 2em;
}
</style>
<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>
As you can see when you test it we have no problem with the witdh. This is because the "sections" that divide the width have no padding, margin or borders. Thus the width we set will be the width they occupy on screen. Now, this is not strictly true in practice. I have actually set the widths 19.95% and not the expected 20%. Problem is that some browsers (IE for one) have a rounding error when adding up percentages and the more subdivisions to add up the greater the error.
Where this method obviously fails is when it comes to the height. Unlike "width: auto;", which will make the div occupy the available horizontal space, "height: auto;" will only make the div as tall as its content. You have to specify "height: 100%;" to get the div to fill the height of the window but alas, when adding margin, padding and borders, the rendered height of the div becomes greater than the viewport, resulting in a vertical scrollbar.
Here I can only really see two choices; Either 1) accept that the divs don't quite fill the window height and set their height to maybe 80% or 2) Skip the bottom border and set the body to "overflow: hidden;", which will crop off the parts of the divs that protrude beyond the edge of the window.
Finally, of course you could also make use of some simple scripting to achieve what you're after. Shouldn't be very complicated at all - but that's a question with another tag... Happy coding!