As you can see ".template-1" with fixed height and ".card-container" have overflow hidden
the issue is when we type some text in .text field its height increases towards top, and all elements from top gets hidden.
If I removed content editable true or pre-inserted text is there..it works fine.
What I want is- Content/text should hide while typing beyond (bottom) of card-container - instead of hiding upper elements ie. image and .title
Here is code snippet
<div class="template-1">
<div class="card-container">
<div class="card-content">
<div contenteditable="true" class="title editable-field">title title title</div>
<div class="visual">
<img src="http://placehold.it/155X55">
</div>
<div class="text editable-field">
Text text
</div>
</div>
</div>
</div>
.template-1{
height: 200px;
}
.card-container, .card-container{
height: 100%
}
.card-container{
overflow: hidden;
border: 1px solid green;
}
.editable-field{
border: 1px solid red;
}
and Jsfiddle for same
https://jsfiddle.net/qkmLsy4h/
EDIT: .editable-field will have height: auto; always
Related
I'm trying to find a workaround to the weird CSS overflow behaviour describe in this answer:
If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
I have a horizontally scrollable section with many card inside of it, I want each card to scale up when the user hover over it.
I started with a simple
.card:hover{
transform: scale(1.5);
}
that obviously resulted in a vertical scrollbar appearing on the horizontally scrollable section, for the rule described at the beginning.
So I tried modifying the position property to absolute on hover and also added a wrapper around the card to prevent other card from collapsing due to the previous element being removed from the document flow, this seems to work but also produces a very weird behaviour: if you scroll horizontally the hover effect kinda breaks, it only works if the mouse is positioned on an overlapping area between the card normal position and the hovered (absolute) position. Since the card gets absolutely positioned on hover, that position remains the same even if the user scrolls horizontally.
I'm trying to find a CSS/HTML only solution, if there is one.
The ideal would be to either have both overflow-y: visibile and overflow-x: scroll or to find a way to calculate the top, left values according to the scrolled position of the cards.
Here is a minimal example (also on jsfiddle):
.container-wrapper{
position: relative;
}
.container{
width: 100%;
display: flex;
overflow-x: scroll;
border: 1px solid orangered;
}
.wrapper{
flex: 0 0 calc( 100% / 5);
}
.card{
height: 100px;
margin: 0 0.5em;
background-color: blue;
}
.card:hover{
width: 200px;
position: absolute;
transform: scale(1.4);
}
/* color */
.red{
background-color: red;
}
.pink{
background-color: pink;
}
.yellow{
background: yellow;
}
.cyan{
background: cyan;
}
.green{
background: green;
}
<div class="container-wrapper">
<div class="container">
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card pink "></div>
</div>
<div class="wrapper">
<div class="card yellow"></div>
</div>
<div class="wrapper">
<div class="card cyan "></div>
</div>
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card green "></div>
</div>
</div>
</div>
Hope I've been clear, thank you all.
I am working on a contact form, and I gave it's div display:flex.
All it's fields are being displayed correctly and dinamicaly resized, except for the submit button which is always cut in half.
Shouldn't it have the same behaviour has the rest of the fields?
Capture:
Try to do something like this.
.child {
width: 500px;
margin: 10px;
height: 30px;
border: 1px solid black;
}
<div style="display:flex; border:1px solid black">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I will prefer to add a parent class to each controls, select fields might have some min-width that why button is shifting to left.
I would like to create a simple popover that displays in place (think about a combobox list below a button). The popover should display over existing elements, i.e. not pre allocate space.
There are many examples using `position: relative -> overflow: hidden -> position: absolute' hierarchy and the work until the popover flows off the bottom of the container, in which case its size affect the parent container and creates a scroll.
Here is a codepen sample. What I'm trying to get is to have no scroll on the rightmost column.
<div class="main">
<div class="column">
<h2>no overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>basic overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover without overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute short">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover with overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
</div>
and the scss file:
html, body {
height: 95%;
}
.main {
display: flex;
flex-direction: row;
border: 2px solid red;
height: 100%;
.column {
margin-left: 20px;
height: 100%;
flex: 1;
border: 1px solid black;
overflow-y: auto;
.tall {
height: 300px;
border: 1px solid blue;
}
.overlay {
position: relative;
.overflow {
background: #F00;
overflow: hidden;
.absolute {
opacity: 0.5;
width: 100%;
height: 600px;
position: absolute;
background: #FF0;
&.short {
height: 200px;
}
}
}
}
}
}
I think (if I'm clear about the question) that this issue can be pretty easily resolved by simply substituting the height of your tall class with min-height and max-height If you set the min-height equal to the short height then the popover shouldn't overflow.
I made my own codepen do demonstrate (i adjusted the popover to 100 in height and set the min-height also to 100 for demo) . The code is the same as the code you posted except for the height in the .short class and min-/max-heights in the .tall class. I added overflow:hidden; to the short class in the event that the the height of the content in the popover being greater than the height assigned.
I have commented out the columns with no popovers but feel free to comment them in.
Hope this helps
First, my codes
HTML:
<div class="div parent">
Title
<div class="div child">
<div class="overflowed">
</div>
</div>
</div>
CSS:
.div {
border: 1px solid #000000;
padding: 10px;
overflow: auto;
}
.parent {
max-height: 100px;
}
.overflowed {
min-height: 150px;
}
Sorry I am not good at describe things about webpage designing, so if I describe something incorrectly, please tell me, thanks :)
How to make child div render like this, and it's bottom border always have margin to it's parent's bottom border?
By the way, "Title" in HTML line 2 will change it's height by different screen resolution, so it can't be limited by max-height property.
jsFiddle here: https://jsfiddle.net/dj3ydshf/
You where almost there. I think this is what you are looking for:
.div {
border: 1px solid #000000;
padding: 10px;
overflow: auto;
}
.parent {
max-height: 200px;
}
/* set overflow y-scroll */
/* and give this element a max-height or height */
.child {
overflow: y-scroll;
max-height: 50px;
}
<div class="div parent">
tuitit
<div class="limit">
<div class="div child">
SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br>
</div>
</div>
</div>
I want the Image to be displayed without cropping or being hidden, by just reducing its size when the text is increased and the wrapped text takes more space
<div class="table">
<div class="cell">
<h5>
<span>"CATxxx45asdfghj 654654654 654654 65465 46546 54654 654654 kl;lkjhgfdsaWERTYUIOPOIUYTREWxcvbnm,mnbvcx"</span>
</h5>
<img src="http://www.placekitten.com/235/75">
</div>
<div class="cell">
<h5>
<span>"CAT"</span>
</h5>
<img src="http://www.placekitten.com/235/75">
</div>
</div>
as in the fiddle
http://jsfiddle.net/nakulkudra/3odug6nt/
the second cell is normal , but when we have large text as it is in the first cell, the image is out of the cell and is cropped as the
OVERFLOW is HIDDEN,
what i want is the image size should be reduced to fit the available space...
please guide ...
You can use the (new) flex property:
It basically tells the .kitten div to occupy the rest of the space.
And with some background properties set to contain, you get your kitten inside it!
This is supported by all recent browsers.
.cell {
border: 2px solid black;
vertical-align: top;
height:170px;
width:200px; word-wrap: break-word;
overflow:hidden;
display:flex; /* This is relatively new, but widely supported */
flex-direction: column; /* the children will form a column */
}
.kitten{
background: url(http://www.placekitten.com/235/75) no-repeat center center;
background-size:contain; /* To reduce the background to fit inside the div */
flex:1; /* This "weight" tells to occupy the remaining space */
}
<div class="table">
<div class="cell">
<h5>
<span>"CATxxx45asdfghj 654654654 654654 65465 46546 54654 654654 kl;lkjhgfdsaWERTYUIOPOIUYTREWxcvbnm,mnbvcx"</span>
</h5>
<div class="kitten">
</div>
</div>
<div class="cell">
<h5>
<span>"CAT"</span>
</h5>
<div class="kitten">
</div>
</div>
</div>
Simply remove .cell {height:170px;} so that image can expand your block.
Other option would be to use JS/jQuery and calculate free space:
$(document).ready(function() {
var freeSpace = $('.cell').outerHeight() - $('.cell h5').outerHeight(true);
$('.cell img').css('max-height', freeSpace);
});
.table {
display: table;
height: 1px;
}
.cell {
border: 2px solid black;
vertical-align: top;
height: 170px;
width: 200px;
word-wrap: break-word;
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="cell">
<h5>
<span>"CATxxx45asdfghj 654654654 654654 65465 46546 54654 654654 kl;lkjhgfdsaWERTYUIOPOIUYTREWxcvbnm,mnbvcx"</span>
</h5>
<img src="http://www.placekitten.com/235/75">
</div>
<div class="cell">
<h5>
<span>"CAT"</span>
</h5>
<img src="http://www.placekitten.com/235/75">
</div>
</div>
add this css to your code where Position:absolute let your image static so it will be never hide and width:200px same width of your div container so image will never transcends borders of your div.
img{
position: absolute;
width:200px;
}