I am creating a basic text reverser on https://shinkarom.github.io/reverser/ (the source code is https://github.com/shinkarom/reverser). For CSS framework I am using http://mincss.com.
The reverser is split into two columns. The left one has the textarea. The right one has the reversed text.
Unfortunately, the textarea is too small and doesn't fill the whole column. Giving it width: 100%;height: 100%; box-sizing:border-box solved the width problem, but the height is still too small.
As a workaround, I tried to give the textarea 25 rows, but it looked very ugly on a smaller browser window.
Here's the relevant code:
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100%;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
How to make the textarea fill the whole height?
put height:100vh instead of 100% if you want the textarea to take full height of page. height:100% can't be applied unless your parent div has specified static height.
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100vh;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
Related
I am wondering how I can make a column in bootstrap to be full page height no matter what. I have currently tried making an id and setting the height to 100%, but I have had no luck.
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-3">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
This is an example of what I have tried. All I want to achieve is to set the entire column to be the entire height of the page. It currently locks to content height. Is there any way around this?
You will need to use CSS to set the height.
First, you need your body to be 100%. Then I would put the columns in a containing div and set that to be 100% (looks like main-row is the containing div). Then if you want only select columns to extend to the full height, give them an class that has 100% set as height.
You can try setting the css to this.
.html, body {
height:100%;
}
#main-row {
height:100%;
}
.fullheightcol {
height: 100%;
}
HTML:
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-6 fullheightcol">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
</div>
I would like to display a block of color with different widths and no space in between. To test it out I made this HTML but it does not show as a block:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"></div>
<div style="display:inline-block;background-color:red; width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"></div>
</div>
The only way I could make it work is to add  . But now I see a space between the color blocks:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"> </div>
<div style="display:inline-block;background-color:red; width:0.3rem"> </div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"> </div>
</div>
Is there a way I can make a square block without ?
Unless you specify a height, a div is as tall as its content. If it has no content, then it doesn't have any height. If it has no height, then there are zero vertical pixels to give a background colour to.
You need to add a height callout is you want to see an "empty" <div>. Like this.
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; height:0.5rem;width:0.5rem;"></div>
<div style="display:inline-block;background-color:red; height:0.5rem;width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; height:0.5rem;width:0.9rem"></div>
</div>
I have a page which breaks down as follows:
<div class="container-fluid" style="min-width:768px">
<div id="main-sidebar"></div>
<div id="main-frame"></div>
<div id="supplementary-sidebar"></div>
<div id="content-container"></div>
<!-- ALL THE INTERESTING CODE GOES HERE -->
<div id="content" class="row"></div>
</div>
</div>
<footer></footer>
</div>
The widths of all the elements in container fill the screen width.
The main-sidebar's width is set to auto.
The main-frame is set to min-width of 72.65%.
The supplementary-sidebar is at 20% of the parent main-frame.
The content-container is at 80% of the parent main-frame.
Basically I want the main-sidebar to be as big as it need to be,
and then have the main-frame fill up the rest of the parent page.
I succeeded at this by accident and have pinpointed the Twitter Bootstrap class that gets the job done. The screen will not fill if I remove it. This is:
<div class="btn-group-justified" style=""></div>
I have tried many different lines of code (included below), which were attempts at doing this consciously. But at this point I can't really go much further.
Does anybody know why this forces the main-frame to fill up the screen?
Here are my attempts:
<!---
NOTHING HERE WORKS
<div style="width:100%"> </div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"></div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"> </div>
<div id="spreader" class="row" style="">
<div class="col-sm-12">
</div>
</div>
<div id="spreader"></div>
#spreader{
display:table;
width: 100%;
table-layout: fixed;
border-collapse:seperate;
display: block;
}
-->
<!--- THIS IS HOW I ORGINALLY GOT IT TO WORK
<div class="row" style="">
<div class="col-sm-12">
<div class="btn-group btn-group-justified" style="">
</div>
</div>
</div>
-->
Here is the the screenshot showing the relevant bootstrap code. For some reason, this still works when I take border-collapse out. But if I include just this in a class like I did with #spreader above (and even if I include border-collapse) it will still not work.
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
is there a way for 'fill' to fill by its height remaining space without using JS?
<div id="all" style="height: 30%">
<div id="ukn" style="height: unknown"></div>
<div id="fill"></div>
</div>
Simply place the unknown div inside the #fill div and set its height to 100%.
<div style="height:30%;">
<div id="fill" style="height:100%;">
<div style="height:_unknown_;"></div>
</div>
</div>
#fill{
min-height: 250px;
}
You may need to change the pixels to the height you would like.