I have an auto expanding text area on card-footer. https://jsfiddle.net/6f9a52we/
Instead of expanding it downwards, Can i make it expand upwards? So as it expands upwards, the card-body should shrink. As we see in Gmail chat.
I tried using position: absolute; and bottom:0px;. In that case, Expanding upwards is working perfectly, But the expanding text-area is covering the texts in card-body due to absolute position. Any Ideas please without using position:absolute ?
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
card body line 1<br>
card body line 2<br>
card body line 3<br>
card body line 4<br>
card body line 5
</div>
<div class="card-footer">
<textarea id="myTextArea" placeholder="type here"></textarea>
</div>
</div>
</body>
</html>
$(function() {
$('#myTextArea').on('input keyup paste', function() {
var $el = $(this),
offset = $el.innerHeight() - $el.height();
if ($el.innerHeight() < this.scrollHeight) {
// Grow the field if scroll height is smaller
$el.height(this.scrollHeight - offset);
} else {
// Shrink the field and then re-set it to the scroll height in case it needs to shrink
$el.height(1);
$el.height(this.scrollHeight - offset);
}
});
});
.card{
text-align: center;
width: 50%;
margin:0 auto;
}
.card-body{
overflow-y: auto;
height: 150px;
}
Add max height to your class card.
.card{
text-align: center;
width: 50%;
max-height: 250px;
margin:0 auto;
}
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I created two divs which can drag and re-size. I used bootstrap to style these two divs. The code is fine and I can drag and re-size two divs finely. But these two divs are overlapping. What is the thing that I do incorrectly? Here is my code.
$('.draggable-handler').mousedown(function(e){
drag = $(this).closest('.draggable')
drag.addClass('dragging')
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
$(this).on('mousemove', function(e){
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
window.getSelection().removeAllRanges()
})
})
$('.draggable-handler').mouseleave(stopDragging)
$('.draggable-handler').mouseup(stopDragging)
function stopDragging(){
drag = $(this).closest('.draggable')
drag.removeClass('dragging')
$(this).off('mousemove')
}
#media (min-width: 600px) and ( min-height: 600px) {
.panel{
background-size: cover;
max-width: 1000px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
max-height: 1000px;
cursor: move;
resize: both;
background-color: #E6E6FA;
}
.panel-body{
background-color: #E6E6FA;
background-size: cover;
}
}
.resizable{
overflow: hidden;
resize:both;
background-size: cover;
}
.draggable{
position: absolute;
z-index: 100;
}
.draggable-handler{
cursor: pointer;
}
.dragging{
cursor: move;
z-index: 200 !important;
}
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<title>Replayable widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="div1_panel" class="panel panel-primary resizable draggable" >
<div class="panel-heading draggable-handler">
<h3 class="panel-title"><b>Div1</b></h3>
</div>
<div class="panel-body">
<b>Hi, I'm div1</b>
</div>
</div>
<div id="div2_panel" class="panel panel-primary resizable draggable" >
<div class="panel-heading draggable-handler">
<h3 class="panel-title"><b>Div2</b></h3>
</div>
<div class="panel-body">
<B>Hi, I'm div2</B>
</div>
</div>
</body>
</html>
Thank you...
You set both divs position:absolute in the class .draggable. That's why both divs are at the left-top corner (left: 0px, top: 0px). A solution would be to add the style position: absolute; not before the dragging starts, i.e. at the mousedown event.
e.g.:
https://jsfiddle.net/m3rg34qm/
All I have done in the fiddle is
removed position: absolute from the .draggable class
added drag.css('position', 'absolute'); inside of the onmousedown handler
assigned a static width to the container .panel
I would like to use the very excellent texteditor CodeMirror in fullscreen mode in a browser window and I would like to add a fixed header for some kind of menu - or at least space for a few buttons with some functionality.
So I've added a div with "position: fixed" to the top and added a padding-top to the div with the codemirror object. The problem comes up, when there's enough text that scrolling happens. After moving the cursor down/scrolling the content up and moving the cursor up again, the cursor goes behind the div but the content doesn't scroll fully down. Cursor is hidden, I cannot see the content. Only scrolling via scrollbar works.
Do I need to change the html/css with the fixed div?
Or do I need to check whether the cursor comes behind/under the div and I have to let CodeMirror scroll manually? I tried this but didn't manage to do it programmatically :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
<button>Some action</button>
</div>
<div style="padding-top: 23px">
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
check out here as well: http://jsfiddle.net/fxvef3bw/1/
I found a solution on my own.
Instead of two overlapping divs, I use two divs (non-overlapping), with style "position: absolute". They don't overlap, so scrolling is fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
<button>some action</button>
</div>
<div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
<textarea id="content" name="content" style="display: none;"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
Updated jsfiddle is here: http://jsfiddle.net/fxvef3bw/2/
I hope I can get some comments about possible side effects or drawbacks of the position absolute. Otherwise it seems to be fine for me.
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/
I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
A html element, set to width: 100%, stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100%.
You also need to make the html and body width 100%.
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
you might need to define the height and width of the parents if you dont want to use js
here i made an example on jsfiddle
jsfiddle
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Vehicles</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>