textarea not expanding according to the content - javascript

I am using a textarea inside which i am getting some values from local db. The problem is the height of textarea is not resizing to the content available and rather its shrinked and only displaying one line.
I tried adding CSS but it doesn't seems to work. Any help or suggestion will be appreciated.
XSL
<textarea id="post-text"><xsl:value-of select="$txn_desc"/></textarea>
CSS
textarea {
width: 100%;
height:100%;
}

try adding
textarea {
width: 100%;
height: auto;
overflow: hidden
}
and also make sure the parent html element have an appropriate height as well.

Related

Dynamically-created element overflowing

I have a dynamically-created list div made using document.createElement(). The div is pulling elements from a database and displaying them. I noticed that when the list is long, the content is cut off despite having set overflow: auto in the body. I subsequently tried adding a large div directly in the HTML and it successfully triggers the scroll bar's appearance--so clearly there's an issue with the dynamic aspect of the div. Any help would be appreciated!
add a max-width
.Body__container--categories {
overflow: auto;
height: 100vh;
max-width: 18%;
}

Using MaterliazeCSS and trying have a button in a fixed position inside it's parent element but having trouble

So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}
The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}

How to set current page size in JavaScript

How to set current page height and width from within JavaScript?
I am using ASP.Net Web Forms. I have some splash screens implemented as aspx web forms. I need to just redirect them and not to open by window.open() function.
How do I give size and position to current window?
I have tried the below code, but it did not work for me
<body style="margin:0px;width:600px; height:90%;" >
Try this
$(function() {
document.body.style.width = '600px'
document.body.style.height= '900px'
});
or if you are using jQuery...
$(function() {
$('body').css('width', '600px');
$('body').css('height', '900px');
});
Resizing the current window of the browser is actually impossible. That can only be done by the user (fortunatly :) )
You can set dimensions to a new window, with window.open();, but that's all.
As I said in comment : Just think about a web where every site could resize user's browser...
You won't be able to control width of body. Rather, you can use a inside your body and outside your content, and then set width, height and position of that .
Also, to set height of that in percentages, you will need to apply height:100% to both html and body in CSS.
So, your content could look like,
<html>
.....
<body>
<div class="content-wrapper">
.....
</div>
</body>
</html>
and your css can look like,
html, body
{
height: 100%;
}
.content-wrapper
{
width: 600px;
margin-left: auto; /* to center the div */
margin-right: auto; /* to center the div */
height: 90%;
margin-top: 10%;
box-sizing: border-box;
}

What's wrong with my simple button?

I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.

How do I stop a parent DIV from stretching when I put an iFrame into it?

I won't post the code directly but you can see it here: http://markbrewerton.co.uk/work.html
I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?
Cheers
The first part is the setup the bounds of the div by using the height and width styles.
After that set the overflow style.
Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
Try this (if you want scrollbars):
#yourdiv {
height: 300px; /* fixed height */
overflow: scroll;
}
...or this (if you want to just clip the content):
#yourdiv {
height: 300px;
overflow: hidden;
}
Edit: You can also fix the height of the <iframe> itself:
#youriframe {
height: 300px;
}

Categories