I've got a slight issue with the below code in IE.
The design is perfect in Chrome and Firefox but IE renders the textarea size very small. I want it as it looks in Firefox or Chrome.
It might be a duplicate of
Consistently sizing a <textarea> under IE, FF, Safari/Chrome
OR
Firefox / IE textarea sizing quirk - workarounds?
but there are no proper solutions mentioned. So I started this.
I'm sure that jQuery can sort it out but I want only CSS in my page, Is there any proper CSS solution to it??
I'm not able to log into jsFiddle, so, no jsFiddle guys.. :(
<!DOCROOT html>
<html>
<head>
<meta charset="utf-8" />
<title>Code Compressor</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.container {
width: 100%;
overflow: hidden;
}
.column {
width: 48%;
margin: 1%;
float: left;
}
textarea {
min-width: 100%;
max-width: 100%;
min-height: 80%;
max-height: 80%;
overflow: auto;
}
.center {
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div>Input Source:</div>
<textarea id="sourceCode" name="sourceCode" ></textarea>
</div>
<div class="column">
<div>Compressed Output:</div>
<textarea id="outputCode" name="outputCode" ></textarea>
</div>
<div class="center">
<input type="button" id="compressButton" name="compressButton"
value="Compress" onClick="compress" />
</div>
</div>
</body>
</html>
If the height is not behaving as expected, so try to set a height for .column. Your textarea is inside of a column and its height is a percentage of his father, but, how high is your father?
Updated
You told that the .center layer is overlapped by the columns if you set a height to the textarea, right? Then we must to set the columns relative to each other and we have to explain to HTML that our .center should to be after our columns. To do this, follow the code:
.column {
width: 48%;
height: 500px; /* for example */
position: relative; /* add this to trasnform your columns
relative to each other */
margin: 1%;
float: left;
}
textarea {
min-width: 100%;
max-width: 100%;
width: 90%;
height: 90%;
min-height: 80%;
max-height: 80%;
overflow: auto;
}
.center {
width: 100%; /* to specify that your "center" must
to occupy 100% of the width on the screen. */
position: relative; /* to transform the position to relative */
float: left; /* to accompany the columns' floating */
clear: both;
text-align: center;
}
Percentage comprehension
Just to make things look better for you: to work with percentage, we need an initial point. This means that for something to have 80% of the height of something else, we need to know the height of something else.
In other words, to .something have 80% of height, we need to know the height of his father, and if his father have 90% of height, the father of his father must to have a specified height. At some point, we need a defined height.
JavaScript alternative
As I said, I have worked too much with percentage measures and no success to found a solution with pure CSS 2.1. Thereat, I created this mini-plugin in JavaScript + jQuery. No work-a-rounds:
function calculateResponsiveHeight(couple) {
for (var value in couple) {
$(value)
.css("height",
$(couple[value].wrapper).height() -
couple[value].spacing + "px");
}
}
Usage:
calculateResponsiveHeight({
".content": {
spacing: 135, // how much you want to spacing your layer?
wrapper: window // who is the reference point?
}
});
try this
#outputCode{
width:100%;
height:100%;
}
You haven't declared a height, add in a "height: 80%", you have just said what the max can be and the min can be - it doesn't intrinsically know what it should be in between.
Related
Desired Outcome:
Further Details:
Right now I am setting the Div height based on estimates (ie. 10% for search bar, 60% for middle and 30% for bottom) and set the thumbnail size to fit well on my Samsung Phone. The problem is that on different phones, the width is different and Div3 ends up with large borders. To complicate matters, Div2 can scroll up/down (minor problem) but Div3 can scroll left/right (moderate problem).
All thumbnail images are guaranteed to be 16:9 (I believe) as they are obtained from here https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg
I'm having conceptual issues trying to size a div (Div3) based on the height generated when an image is stretched the (more or less) the screen width)
Question:
How can I get the three below divs, while allowing for (1) vertical scrolling in Div2 and (2) horizontal scrolling in Div3
Code:
JSFiddle code. Try on iPhone X, it looks weird
Important sections:
#search_bar {
width: 100%;
height: 10%;
border: 0px;
float: right;
padding:0px;
position: relative;
background-color:red;
}
#search_results {
width: 100%;
height: 58%;
padding:4px;
float: right;
overflow:auto;
background-color:green;
}
#playlist_reel {
width: 100%;
height: 32%;
padding:4px;
clear: both;
overflow-x: auto;
white-space: nowrap;
background-color:blue;
}
I went off the diagrams you included and tried to replicate a simple version of it.
Use flexbox for column layout
Have #search_results take up as much space as possible
Have #search_barand #playlist_reel take up only the space they occupy (totally adjustable)
Use a background-image for #search_results so the element is always covered.
Use a static img in .bottom so that it takes up actual DOM space
As for scrolling, the requirement feels a little broad at the time I am posting this. Maybe this demo will get you close enough to experiment with scrolling on your own.
Note: This demo is more easily viewed in either "full page" mode (here in SO) or in the jsFiddle.
html, body { margin: 0; }
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 380px;
max-width: 100%;
margin: 0 auto;
}
#search_bar [type=search] {
width: 100%;
padding: 1em;
font-size: 1.25rem;
}
#search_results {
flex-grow: 1;
background-image: url('http://placekitten.com/400/500');
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="search_bar">
<input placeholder="Search" type="search">
</div>
<div id="search_results"></div>
<div id="playlist_reel">
<img src="http://placekitten.com/400/50" alt="">
</div>
</div>
jsFiddle
I have another problem.
I made a #wrapper in my page to control width of content, but...
It's not working on bigger screens than 1366px.
Tested it on 1920 screen and in debugger page has total width of wrapper (not 1920 but 1244px (wrapper width)).
Same problem was on 4k TV - Page was "scaled" to wrapper width.
It looks like full width of page was wrapper and "width: 100%" on body/sections were ignored.
Any idea where is problem?
Without !important on wrapper its same, max/min width not working. Changing units to vw not working also. Removing/changing meta tag not working. There is no other tags that overwrite wrapper. Styles has been cleared by SCSS Reset at start.
What Im doing wrong?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px !important;
margin: 0 auto !important;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="Stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="aaa">
<div id="wrapper">
<h2>content</h2>
</div>
</section>
</body>
</html>
it should be like that:
[-margin-[-wrapper 1224px-]-margin-]
[------------------1920px-----------------]
And its like that on 1920px resolution:
[--wrapper 1224px----]
[-1224px in debugger-]
Even if screen resolution is 1920px
There is link to cleared page: www.xileo.pl
And img from 4k screen:
As you can see, there is 3840px screen, where wrapper is scaled to 3840px and its not 1224px with margins.
I want it to be on 1224 px with margins.
If i understood you correctly, try this:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
max-width: 1224px;
margin: 0 auto;
}
Provide a jsfiddle if this is not helping you.
*Edit added a screen from near 4k resolution, your screenshot is not from true 4k device, it is maybe scaled or something else is going on so you need to figure that one with some kind of debuging. All else behaving as expected. You might have something else in ur css files that maybe override your code, so you partial code you posted is working as expected.
Updated:
https://jsfiddle.net/8yt3fp0k/ the css works, definitely something wrong with the SCSS, probably another #wrapper is definned somewhere else out of the snipped provided.
css:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px;
margin: 0 auto;
}
If you want it to be different on bigger resolution, than change width:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px;
margin: 0 auto;
}
#media only screen and (max-device-width: 1224px) {
#wrapper {
width: 100%;
margin: 0 auto;
}
}
New answer after question edit and posted link to original website:
You have this rule:
.index .main-page .main .main-box .about-us {
width: 100%;
padding-right: 370px;
}
This gives the upper text block a very large right padding which diminishes its width. You can erase that rule to strecht about-us across the full width of the wrapper.
However, if you want .about-us to be narrower and horizontally centered inside the first wrapper, change that rule to
.index .main-page .main .main-box .about-us {
width: 1224px; /* any value you like */
position: relative;
margin: 0 auto;
}
Also, note two more things:
1.) wrapper has the 1224px limitation and is also used inside the other sections. So if you want the subsequent section (the one with the four text blocks) to stretch across a wider screen, change the width and max-width values in the wrapper rule
2.) You are using wrapper more than once. But it is bound to an ID, which should only be used once per page. So you should change #wrapper to .wrapper in the CSS and all id = "wrapper" attributes in your HTML elements to class = "wrapper"
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement:
height: calc(100vh - 75vw)
Is there some workaround way I can achieve this using purely CSS even though the viewport units can't be used in the calc() statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS.
Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.
FIDDLE (In IE10+)
Solution (for other browsers): box-sizing
1) Start of by setting your height as 100vh.
2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.
3) Just offset the extra padding-top with a negative margin-top
FIDDLE
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
As a workaround you can use the fact percent vertical padding and margin are computed from the container width. It's quite a ugly solution and I don't know if you'll be able to use it but well, it works: http://jsfiddle.net/bFWT9/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
<div>It's working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
Check here this css code right now support All browser without Opera
just check this
Live
see Live preview by jsfiddle
See Live preview by codepen.io
Doing this with a CSS Grid is pretty easy. The trick is to set the grid's height to 100vw, then assign one of the rows to 75vw, and the remaining one (optional) to 1fr. This gives you, from what I assume is what you're after, a ratio-locked resizing container.
Example here: https://codesandbox.io/s/21r4z95p7j
You can even utilize the bottom gutter space if you so choose, simply by adding another "item".
Edit: StackOverflow's built-in code runner has some side effects. Pop over to the codesandbox link and you'll see the ratio in action.
body {
margin: 0;
padding: 0;
background-color: #334;
color: #eee;
}
.main {
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 75vw 1fr;
}
.item {
background-color: #558;
padding: 2px;
margin: 1px;
}
.item.dead {
background-color: transparent;
}
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/index.css" />
</head>
<body>
<div id="app">
<div class="main">
<div class="item">Item 1</div>
<!-- <div class="item dead">Item 2 (dead area)</div> -->
</div>
</div>
</body>
</html>
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}