Please check the below fiddle :
https://jsfiddle.net/a13nd32u/3/
<textarea rows="5" cols="50" style="width:95%;height:90%;overflow:hidden">
What's on your mind?
</textarea>
Here when I am trying to expand the textarea vertically then it box is getting outside the box. I want to implement it such that whenever the user expand the textarea vertically , the div background should also be expand with it. Can anyone please provide a solution
HTML
<div class="divv">
<textarea rows="4" cols="65"></textarea>
<h4>
space
</h4>
</div>
CSS
.divv{
background-color:green;
}
textarea {
resize: vertical;
overflow: auto;
}
JSFIddle
See if it helps
Thank you
Use This
#container {
background-color: #e6e6e6;
border-style: double;
float: left;
height: auto;
min-height: 160px;
padding-top: 5px;
width: 470px;
}
Maybe something like this? https://jsfiddle.net/aa0mkvfz/:
#container {
border-style: double;
width: 470px;
height: 160px;
background-color: #E6E6E6;
padding-top: 5px;
overflow: auto;
}
hr {
border-color: #FAFAFA;
padding: 0;
margin: 0
}
#upper_space {
color: #3b5998;
margin: 0;
padding-top: 6px;
padding-bottom: 5px;
padding-left: 10px;
}
#textbox {
background-color: white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
overflow: auto;
}
#post_part {
display: inline;
padding: 6px 9px;
float: right;
font-size: 15px
}
select {
width: 80px;
height: 21px;
padding-right: 10px;
display: inline
}
#button1 {
display: inline;
padding-left: 10px
}
#post_button {
height: 24px;
width: 70px;
font-size: 14px;
-webkit-appearance: none;
}
All I did was add an overflow:auto; on the required divs, this creates a new block formatting context, please check this document to learn more about it:
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Related
I have three div elements inside a wrapper-div as below:
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
I have applied below CSS on these which makes them appear side by side in the same row.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
Now I want middle div to appear as a superscript to the text in left div. To achieve it I apply below CSS to the middle-div.
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: relative;
left: -45px;
top: -5px;
}
This makes the middle-div appear as a superscript to the left-div however it leaves an undesired white space in middle-div's original position.
Could you please help me with fixing it.
Note: In my original problem I have an uncontrolled variable number of divs where I want every second div to act as a superscript to its previous div.
Set the wrapper to position: relative; and display: flex;
then you can simply set the middle div to absolute as below when you want it to do the superscript effect.
.wrapper-div {
display: flex;
position: relative;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
position: relative;
margin-right: 0;
}
.middle-div {
display: block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 25px;
top: 2px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
If you can't change the div structure (put the middle inside the left), you could put the wrapper in position:relative and the middle div in position:absolute instead.
It will give :
.wrapper-div {
display: inline-block;
position:relative;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 20px;
top: 2px;
}
Here is a Codepen: https://codepen.io/anon/pen/ePrMqv
I believe it would be more correct (and also give you less headaches) to have the "superscript" divs as subdivs like this:
<div class="left-div">
Hi
<div class="middle-div">
Hello
</div>
</div>
This would be both easier to read in code and easier to control with regard to positioning.
Don't use positioning: use negative margin.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
margin-left: -35px;
margin-right: 0;
vertical-align: top;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
Codepen of the difference between positioning / transform / negative margin
I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!
You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
I am having a little UI issue and cannot work it out.
On an iOS device, when I click in the input QTY value on the fixed buy element at bottom, it shifts the whole page to the bottom.
CSS:
.product-bottom-sticky {
position: fixed;
bottom: 0;
background: #000000;
width: 100%;
padding: 0 14px 2px 0;
color: #ffffff;
display: none;
z-index: 1;
ul {
margin: 0;
li a span {
display: block;
font-size: 0.4em;
text-align: center;
margin-top: -6px;
margin-bottom: 5px;
}
}
.zopim-call-chat {
float: left;
font-size: 2em;
color: #ffffff;
}
.sticky-add-to-cart {
float: right;
margin: 6px 0 0 0;
padding: 3px 22px 9px 22px;
text-decoration: none;
}
.sticky-add-to-cart i {
font-size: 1.4em;
top: 2px;
left: -3px;
}
}
.sticky-qty div.form-control {
margin-bottom: 0px;
margin-top: 6px;
}
#media #{$mobile-breakpoint} {
.product-bottom-sticky {
display: block;
}
.sticky-chat {
float: left;
border-right: 1px solid #333333;
padding-right: 15px;
padding-top: 7px;
padding-left: 14px;
background: #555555;
}
.sticky-qty {
float: right;
width: 31%;
padding-top: 7px;
}
.sticky-qty label {
float: left;
color: #ffffff;
margin-top: 10px;
display: none;
}
.sticky-qty .quantity-input {
width: 31%;
float: right;
padding-top: 7px;
}
.sticky-add .button-add-to-cart {
background: #f14fa1;
border-color: #f14fa1;
}
.sticky-add,
.sticky-out {
float: right;
width: 52%;
padding-top: 7px;
}
}
Update
I found a partial solution here:
https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/
CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
This fixed the issue but created another issue: when I click the tabs it scrolls to the top.
Update 2
This is my JS which seems to be conflicting - maybe as it's using body, html. Is there a way to sort it since the input fix I added? It just seems to jump to the top of the tab on changing the tabs.
JS:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
<div class="add_nav_header">
<div class="centerButtons">
<a class="btnLogout smallBtn" data-role="button"></a>
<a class="btnSearch smallBtn" data-role="button"></a>
<a class="btnViewList smallBtn" data-role="button"></a>
</div>
</div>
.centerButtons {
width: 50%;
margin: 0 auto;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
float: right;
margin: .3em;
padding: .6em;
font-size: .9em;
}
.btnLogout {
float: right;
}
.btnViewList {
float: left;
}
.btnSearch {
left: -33%;
}
This is my html and css and I want to center the middle btnSearch button but I don't want to have to set the left percentage for every screen size with media queries.
jsfiddle example
You could use text-align: center to the container and remove float from div you want to be centered.
.centerButtons {
width: 50%;
margin: 0 auto;
text-align: center;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
/* float: right; */
margin: .3em;
padding: .6em;
font-size: .9em;
display: inline-block;
}
.btnLogout {
float: left;
}
.btnViewList {
float: right;
}
/* .btnSearch {
left: -33%;
} */
Fiddle: http://jsfiddle.net/zfh1ono0/
I'm not sure if I fully understand your question, but this link might help you: CSS centering. The key is this line:
transform: translate(-50%, -50%);
I'm using an HTML/CSS template to create a web app. For some reason the elements are not sliding back on the template when I resize the window which I need them to do. For example, if I float a button on the right it would position itself to the leftmost portion of the full screen. If I then contract the window horizontally the button does not move back but is simply 'hidden by the window'. I've been looking at the template CSS code for days now and googling everywhere but I still don't know what's causing this.
Here is the CSS code for the template:
body, html {
padding:0;
margin:0;
font-family: BBAlpha Sans;
font-size: 15pt;
overflow:visible;
}
body {
background-image: url('../images/stripes.png');
overflow:hidden;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
.label
{
display:inline;
float:left;
line-height:40px;
margin-left: 5px;
}
.row
{
height: 40px;
width:100%;
vertical-align: middle;
}
.tab
{
position:absolute;
top:70px;
padding: 10px;
}
.main-panel
{
position:relative;
}
.panel-top-left {
margin-right: 4px;
height: 4px;
background-image: url('../images/panel.png');
}
.panel-top-right {
margin-top: -4px;
margin-left: 4px;
background-position: 100% 0;
height: 4px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-left {
margin-right: 9px;
background-position: 0 -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-right {
margin-top: -9px;
margin-left: 9px;
background-position: 100% -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-inside {
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: White;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.panel-nogap {
margin-top: -3;
margin-bottom: -3;
}
.panel-nogap input
{
display:inline;
float:left;
font-family: BBAlpha Sans;
font-size: 16pt;
border: none;
padding-top: 0px;
width: 10px;
margin-top: 7px;
}
.buttonPanel
{
margin-top: 5px;
margin-left: 8px;
margin-bottom: 0px;
text-align:center;
position:relative;
}
a.tabButton {
background: transparent url('../images/tabs/tabRight.png') no-repeat scroll top right;
color: White;
display: block;
float: left;
height: 64px;
margin-right: 5px;
padding-right: 10px;
text-decoration: none;
width: 28%;
}
a.tabButton div {
background: url('../images/tabs/tab.png') no-repeat top left;
display: block;
height: 64px;
padding: 0px 0px 0px 10px;
line-height: 0px;
}
a.tabButton p
{
font-size: 10pt;
margin-top: 0px;
padding: 0px;
}
a.tabButton img
{
position:relative;
height:35px;
width:35px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
}
.tabSeparator
{
position: absolute;
top:69px;
background-color:#014EBE;
height:5px;
width: 100%;
z-index: -1;
}
and what the template looks like:
If anyone knows what is causing this or at least what I should look for, any help at all would be appreciated. Thanks in advance!
How about changing the position properties... fixed would be your best bet: positioning it fixed # 5em from the browser sides or something:
http://www.w3schools.com/cssref/pr_class_position.asp
play around on w3schools, it's a great site :)