I am trying to create a "chat window", I have most things sorted out but somehow I can't get the "conversation" textarea to occupy the rest of the window vertically.
Here is my full page code (the textarea I want to adjust is the one inside the div id="conversation"):
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<title>
chat prototype
</title>
</head>
<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >
<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>
<div id="chatWindow" class="col-md-10" style="border-style:solid;">
<div id="conversation" class="row">
<textarea readonly class="form-control" style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>
<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>
<span class="input-group-btn">
<button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color: #999999">Send</button>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
</body>
</html>
Every piece of css that is not bootstrap is individually in the elements using style=.
So far I've tried some things:
Relative height: definition, but that gives undesirable results when the window is minimized (it keeps the size according to the screen size and not to the window size).
Flex approach: placed display:flex; flex-direction:column on the div id=conversation and afterwards on the div id=chatWindow always using flex: 1 on the textarea, but with no results. I saw this solution on some other question from Stack Overflow, so decided to try it out obviously.
Ok, so the answer from "user123" was mostly correct but, in terms of browser compatibility it was giving me problems due to $(window).innerHeight();
Which, according to the w3schools description is "the inner height of a window's content area"
However, this was only working on Edge and IE11. To get it working on Edge, IE11, Firefox and Chrome I had to use $(window).outerHeight();.
Which is described at w3schools as being "the outer height of a window, including toolbars/scrollbars"
Bottom-line: In terms of "sense", it makes none of it but I got it working using the outerHeight() instead of the innerHeight() function.
PS:Posted as an answer to call attention.
Assign your window height to your chat box height. Add your own code id or class name instead of "#myDiv".
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).outerHeight();
$('#myDiv').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
For more see this link:ViewPort
Related
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
I have an issue regarding textarea tag used along with materialize.css library
Current Behavior
Text area expands as we place more text
Desired Behavior
I want to have a fixed height text area and when i insert a big text height remains as it is and textarea becomes scrollable
$('#textarea1').val('');
$('#textarea1').bind('input propertychange', function() {
M.textareaAutoResize($('#textarea1'));
});
<textarea id="textarea2" rows="10" cols="50" style="height: 100px;"></textarea>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s12">
<textarea id="textarea1" style="height: 100px;" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
The issue presented on the above snipper, what i need is a textarea like the plain one which adds a scroll on big texts.
I got through the documentation and the only mention on textarea's is this
advanced note: When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.
There is any way to make textarea scrollable with custom css or even better through the library alone?
Set the height of textarea and override it with !important. This will ensure that the textarea won't resize. For scrolling part, add rows and oninput attribute. oninput is triggered every time the value of an element changes even while it still is in focus.
Read more: https://html.com/attributes/textarea-onchange/#ixzz5RoZe3nfp
In materialize.css file, in class textarea.materialize-textarea, you'll find that overflow-y is set to hidden. So with the help of rows, lineCount and overflow-y, scrollable materialize textarea with fixed height can be achieved.
HTML -
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea" rows="5" oninput="changedValue()"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
CSS -
textarea {
height: 8rem !important;
}
JS -
function changedValue() {
let text = document.getElementById("textarea1");
let textValue = text.value;
let row = text.getAttribute('rows');
let lines = textValue.split(/\r|\r\n|\n/);
let count = lines.length;
if (count >= row) {
text.style.overflowY = "scroll";
}
else if (count < row) {
text.style.overflowY = "hidden";
}
}
Credits - Ir Calif - For line count
I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.
There are scads of questions on this, but after 2 hours of looking, I haven't found an answer:
I have a div that has a canvas inside it. (Although I've also tried with just ordinary text).
<div class="gpdialog" style="width: 90%; display: block; position: fixed; left: 23.25px; top: 41.95px;">
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
<h1 class="centered">
Color Scheme Picker
</h1>
<div class="widget_container">
<canvas id="color_picker_canvas" ;="" height="600" width="500"></canvas>
<div class="yui3-g">
<div class="yui3-u-1-1"></div>
</div>
</div>
</div>
</div>
I draw on the canvas, and the drawing extends down below the page. The scrollbar shows up on the right hand side, but isn't activated. This happens in both Chrome and Firefox. (Haven't tried any other browsers.) There is no access to the bottom of the page (where there are buttons). I'm not sure what else to look for.
TIA.
Your syntax is wrong.
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
Should be..
<div id="colorSchemeEditor" ;="" style="overflow :scroll;">
You forgot the semi-colon. But what's up with ;=""?
There are multiple factors here, and I haven't tested all cases but:
(1) The 'overflow: scroll' probably should be in the immediately enclosing div
(2) The div with the scroll needs to have height and width specifiers.
(3) The height and width specifiers need to be IN THE SAME STYLE ELEMENT with the overflow specifier.
Thus:
<div style="height: 300px; width:300px; overflow :scroll;">
But NOT
<div height="300px"; width="300px"; style="overflow: scroll;">
I'm using jquery-mobile and I'd like to have the control-elements of my main-view to fill the entire available height and width, like in this picture:
To set the height like:
<div id="ButtonContent" style="height:100%>
<button style="height:50%/>
<button style="height:50%/>
</div>
doesnt work. See
jsFiddle
I also would like to have this div-container to fill the entire space:
Therefore I have this jsFiddle
I tried to set the height of the div-conatiner and it's content to 100%, but that doesn't work.
There are some concepts you have to understand:
The answer from Hiigaran.
Button are inline elements.
This could be what you want:
<div id="ButtonContent" style="height: 500px">
<div style="height: 50%"><button style="height: 100%"/></div>
<div style="height: 50%"><button style="height: 100%"/></div>
</div>
Try on JSFiddle
To my understanding, you can't set height:100%; if you don't have an absolute value height on the parent element. For example, if you have the following HTML:
<body>
<div class="something"></div>
</body>
This CSS will not work:
.something{height:100%;}
But this one should:
body{height:500px;}
.something{height:100%;}
If you are tailing to mobile devices, continue using percentage as you normally would, but make sure that the body tag is set to the pixel height that the relevant device(s) have.
Add following code in your css file.
#boxBrowserContent .ui-btn{height:150px;margin:10px;}
#boxBrowserContent{padding-top:100px;}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
height: 400px;
width: 33.25%;
}