I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
I would like to expand the child-content to the full width. I've tried everything and I don't know what can run.
I've only made it run with min-width: n px; but I wouldn't like to define a specific width in pixels because the design won't be adaptive in smaller screens.
https://jsfiddle.net/tiranium/e8w22j39/
HTML
<div class="ficha_container">
<div class="ficha_row">
<div class="ficha_cell">
<h1>Title</h1>
<p>Content.</p>
</div>
</div>
</div>
CSS
.ficha_container {
display: table;
background-color: green;
box-sizing: border-box;
overflow: hidden;
display: block;
}
.ficha_row {
display: table-row;
}
.ficha_cell {
display: table-cell;
}
.ficha_cell p {
background: pink;
}
Assuming you want a display:table solution, you can't also add display: block to the same element.
My guess why you did that, were to make it full width.
To make a table full width you simply set it to 100%, so to make your existing markup work properly, remove display: block from .ficha_container and add width: 100%;
.ficha_container{
display:table;
background-color: green;
box-sizing: border-box;
width: 100%;
}
.ficha_row{
display:table-row;
}
.ficha_cell{
display: table-cell;
}
.ficha_cell p{
background: pink;
}
<div class="ficha_container">
<div class="ficha_row">
<div class="ficha_cell">
<h1>Title</h1>
<p>Content.</p>
</div>
</div>
</div>
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}
I'm trying to set a button's display property as table-cell but it doesn't behave like one.
Any help would be appreciated.
jsFiddle Demo (The demo contains a fixed container height, but I need it to work without it).
No fixed sizes Demo.
DOM:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<button class="item"></button>
</div>
CSS:
.container {
border: 5px solid blue;
display: table;
table-layout: fixed;
}
.item {
border: 3px solid red;
display: table-cell;
}
The result:
Edit: I need it to work entirely like a table cell, even without fixed sizes.
Note that some solutions seem to work fine on Chrome but don't work on FF.
How about using a label? That way you get the functionality of the button, but the visibility of the label. Tested in Firefox and Chrome. Updated example for form submission.
No JavaScript is involved with the clickability of the cell region
Works without a fixed height on the container
Works when a different cell has a larger height than the one with the button
Works with multiple button cells
HTML:
<form onsubmit="alert(); return false;">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container">
<div class="item">4</div>
<div class="item">5<br><br><br>Extended cell</div>
<label class="item">Button 1<button type="submit"></button></label>
<label class="item">Button 2<button type="submit"></button></label>
</div>
</form>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
}
.item button {
background-color: transparent;
position: absolute;
left: -1000px;
height: 1px;
width: 1px;
overflow: hidden;
}
JSFiddle here.
http://jsfiddle.net/Rhhh7/7/
In this example I've wrapped the button in the div class="item" just like the other div's. But this time, I've styled the button separately to stretch to the height and width of the div.
.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}
EDIT:
Here's the fix http://jsfiddle.net/Rhhh7/10/
To address the Firefox issue.
Add this to the class "item":
.item {
border: 3px solid red;
display: table-cell;
height:100%;
vertical-align:top;
}
In order for the td to have a height of 100%, the parent must have height of 100% as well. The vertical-align:top then sets the button to the top of the div instead of the default, middle.
button.item { width: 100%; height: 50px; }
You could always just wrap the button in a div.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"><button>Button</button></div>
</div>
CSS
button{
width:100%;
height:2.75rem;
}
So I guess at the end of the day, the final solution here is it might not be possible cross-browser without a fixed unit of measurement :(
this seems to work:
HTML
<div class="container">
<div class="item">Some text to make the cell bigger</div>
<div class="item"></div>
<div class="item"><button class="button-item"></button></div>
</div>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
background: transparent;
}
.button-item{
border: 5px;
-moz-border:5px;
height:100%;
width: 100%;
}
Fiddle Demo
How it looks on FF:
Wrapping in a div is a solution but I can't understand why you cannot change the display property for button elements like you can all other elements. For example you can make a link tag act like a div tag.
This prevents doing stuff like changing the display order of buttons:
http://codepen.io/bakers37/pen/emoKvK
In Chrome/Firefox this doesn't work as expected.
HTML
<div class="wrap">
<div class="btn bottom">Back</div>
<div class="btn top">Continue</div>
</div>
<div class="wrap">
<button class="btn bottom">Back</button>
<button class="btn top">Continue</button>
</div>
CSS
.wrap {
display: table;
margin: 20px 0 30px 0;
width: 100%;
}
.btn
{
display: block;
width: 100%;
margin: 5px 20px;
padding: 10px;
position: relative;
background: #ccc;
}
.top {
display: table-caption;
}