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?
Related
I am trying to display a four grid with different items for my web, however now all children divs have the same size:
<div class="container">
<div class="grid4">
<input type="submit" name="input1" value="input1"/>
</div>
<div class="grid4">
<input type="submit" name="input2" value="input2"/>
</div>
<div class="grid4">
<input type="submit" name="input3" value="input3"/>
</div>
<div class="grid4 no-border">
<input type="submit" name="input4" value="input4"/>
</div>
</div>
CSS:
.container {
width: 100%;
margin: 30px 0 30px 0;
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40,40,40,0.8);
display: inline;
}
.no-border {
border: none;
}
I tested it in jsfiddle and they indeed have the same size:
http://jsfiddle.net/ME7k8/
However, you can clearly see that the last chil div is smaller:
Why?! Any help?
edit In case it is too small in the image:
elemento {
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40, 40, 40, 0.8);
display: inline;
}
div {
text-align: left;
}
body, div, td {
font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
font-size: 12px;
color: #666;
}
Inherited from body
body {
text-align: center;
}
edit I checked again with the browser inspector and I can see that the first div is about 50% of the .container div. It has exactly the same css properties than the rest of the divs.
The 3 first divs are wider than the last due to:
1. They have the CSS display:inline (meaning their width gets effected by white-spaces, line breaks etc).
2. The last div has no border unlike the first 3.
Give them identical width
So what you need to do to make sure all 4 divs have the same width is removing all white-space between the submit buttons and their parent divs, and also add padding-right:22px; to the last div (if you want the 4 divs exactly identical wide).
jsFiddle demo.
I use your jdFiddle and put a blue background to see the difference, all divs have the same size, however, I declare a size for the container
.container {
width: 1200px;
background-color: tomato;
}
and re adjust the size of the divs with the grid4 attribute
.grid4 {
display: block;
float: left;
width: 20%;
padding: 2.3%;
border-right: 0.2% solid rgba(40,40,40,0.8);
display: inline;
background-color: blue;
}
when you put padding to each one (20px) that pixels are added to the "25%" of total size.. so this make it a bigger element, and probably that's the difference you couldn't see... with that on mind, may be you could solve your problem... Check This...
Your last element has no border, while the others probably do.
Borders take up space, as do margin and padding.
Check out the box model by pressing ctrl + shift + i in your browser and hovering over an Also,
http://www.w3schools.com/css/css_boxmodel.asp
From inside to outside, there is padding, borderin, margin, outline.
The first three add size to your "box model". Outline does not.
If you specify a width or height, any padding, border, or margin will make your element not that specified width or height anymore. Needless to say, this makes for all kinds of headaches
One solution around this is to use box-sizing: border-box;
This makes specified padding and border actually be your specified width or height. Margin will still add to the dimension, which makes sense if you think about it.
http://css-tricks.com/box-sizing/
Also be sure to take care of prefixes so that it works on all browsers.
You may not want to deal with this at this point, but check out the example in the last link, as well as caniuse.com.
If you don't want to handle cross browser support manually, there is a library to automatically post-process your CSS to add the appropriate prefixes. This uses the caniuse.com database so as long as you update this library, your post-processed css file will have the up to date prefixes without you having to worry about keeping up with browser versions or individual css feature deprecations.
https://github.com/ai/autoprefixer
article on auto prefixing
http://css-tricks.com/autoprefixer/
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>
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.
Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg
I'm trying to recode one of my older forms. It was filled with tables that I want to replace with CSS. However I'm having trouble having text and a form element aligned vertically together. As the picture shows the text defaults to starting at the top instead of in the middle. The blue highlights around the row is dreamweavers interpretation / selection of what is going on.
I have label and input divs, both floated left, inside a div called #light, which is inside a general container. This is what my css code looks like:
#contentBox{
width: 600px;
float: left;
background-color: #e2e2e2;
overflow: auto;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
font-size: 12px;
}
#light {
float: left;
width: 500px;
padding: 15px;
background-color: #e2e2e2;
margin: 7px;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
vertical-align: middle;
}
input {
float: right;
width: 20em;
}
label {
float: left;
text-align: right;
vertical-align: baseline;
}
Any idea what the problem is? I've tried swapping around the vertical-align in different divs, floating in different directions, getting rid of the label but I just end up with more problems rather than less.
You cannot use vertical-align on elements unless they are table cells (or displayed as such) as this article explains. Set line-height to the element height if you've only got one row of text.
Usually, to solve that problem, I use the line-height property:
Ex:
div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}
This will set the font to 12px, and the line-height to 30px, keeping the font vertically align within the 30px of its line.
Vertical alignment of text can be incredibly annoying or incredibly easy.
If the size of all the involved elements are known, your best bet is to set manual padding/margins on the text itself to make sure it's aligned.
If the content you want to center vertically is dynamic, this is your best bet.
Not sure, but your input tag is set to "float:right", so its height won't be taken into account by the parent. Hence, the height of the parent is actually probably the height of the label (I suspect dreamweaver is not interpreting correctly what browsers do.) Try to remove the float on the input tag and see if it makes a difference.
Vertical alignment can be applied only to inline elements.
The best solution is to modify your HTML and make it like in this examples
You could go for a 'cheap' solution and apply a padding-top to the label divs.
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!