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.
Related
My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?
Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>
I used the following structure to gain the same height as the smaller sibling.
<div class="col-md-12" style="display: table; height:100%;">
<!-- child 1 - this should take the height of the smaller sibling -->
<div class="col-md-4" style="height: inherit;
overflow: scroll;
border: 1px solid #ccc;
padding: 10px;"></div>
<div class="col-md-8"></div>
</div>
This worked fine when the browser (Chrome) was zoomed out. But when I reset the zoom, the scroll box shrunk.
Why is this occurring and how to get the initial display in the normal browser size?
I cannot reproduce the problem in jsFiddle but the code is as follows anyway:
https://jsfiddle.net/sachid/tvck2x6j/
Please use height like this way :
<div class="col-md-12" style="display:table;height:auto;"><!--either use fix height (height :500px;)-->
<!-- child 1 - this should take the height of the smaller sibling -->
<div class="col-md-4" style="height: inherit;
overflow: scroll;
border: 1px solid #ccc;
padding: 10px;"></div>
<div class="col-md-8"></div>
</div>
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
I have a catalog of products. All elements are floated left. However different elements can be of different height, because of the picture inside can be of different size. When middle element is longer than others in the same row, than second line elements get stuck to it.
Fiddle
HTML:
<div class="frame">
<div class="element">
<div></div>
</div>
<div class="element">
<div class="img"></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
</div>
CSS:
.element{
float: left;
border: 1px solid black;
margin: 0px 0px 10px 10px;
min-height: 110px;
min-width: 70px;
box-sizing: border-box;
}
.frame{
width: 240px;
overflow: hidden;
border: 1px solid black;
padding: 10px 10px 0px 0px;
}
.img{
height: 130px
}
Here you can see just a model of what I am talking about, it is not the real code, but it represents the problem. Is there any way I can adjust height of the same row element, so that there height will adjust the longest element in the row?
Have you applied Clear Property to the last element of your layout?? It is mendatory...
I think you need flexbox.
Check out my page here and how I position picture tiles.
This is not possible with CSS alone, you will need JavaScript to fix this. Masonry solves this problem: http://masonry.desandro.com.
Since you want to display images, you also might want to take a look at CollagePlus.
I have the following HTML: http://jsfiddle.net/fMs67/. I'd like to make the div2 to respect the size of div1 and scroll the contents of div3.
Is this possible?
Thanks!
UPDATE-1:
This is the more advanced case that I oversimplified when I asked the question: http://jsfiddle.net/Wcgvt/. I need somehow that header+it's sibling div to not overflow the parent div's size.
Adding position: relative to the parent, and a max-height:100%; on div2 works.
<body>
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
Update: The following shows the "updated" example and answer. http://jsfiddle.net/Wcgvt/181/
The secret there is to use box-sizing: border-box, and some padding to make the second div height 100%, but move it's content down 50px. Then wrap the content in a div with overflow: auto to contain the scrollbar. Pay attention to z-indexes to keep all the text selectable - hope this helps, several years later.
If you put overflow: scroll on a fixed height div, the div will scroll if the contents take up too much space.
Instead of overflow:auto, try overflow-y:auto. Should work like a charm!
Is this what you are wanting?
<body>
<div id="div1" style="height: 500px;">
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
http://jsfiddle.net/fMs67/1/
i have just added (overflow:scroll;) in (div3) with fixed height.
see the fiddle:- http://jsfiddle.net/fMs67/10/
I created an enhanced version, based on Trey Copland's fiddle, that I think is more like what you wanted. Added here for future reference to those who come here later.
Fiddle example
<body>
<style>
.modal {
height: 390px;
border: 5px solid green;
}
.heading {
padding: 10px;
}
.content {
height: 300px;
overflow:auto;
border: 5px solid red;
}
.scrollable {
height: 1200px;
border: 5px solid yellow;
}
.footer {
height: 2em;
padding: .5em;
}
</style>
<div class="modal">
<div class="heading">
<h4>Heading</h4>
</div>
<div class="content">
<div class="scrollable" >hello</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
The simplest way is as this example:
<div>
<div style=' height:300px;'>
SOME LOGO OR CONTENT HERE
</div>
<div style='overflow-x: hidden;overflow-y: scroll;'>
THIS IS SOME TEXT
</DIV>
You can see the test cases on:
https://www.w3schools.com/css/css_overflow.asp
function start() {
document.getElementById("textBox1").scrollTop +=5;
scrolldelay = setTimeout(function() {start();}, 40);
}
function stop(){
clearTimeout(scrolldelay);
}
function reset(){
var loc = document.getElementById("textBox1").scrollTop;
document.getElementById("textBox1").scrollTop -= loc;
clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and start