I have the following HTML5 page (in a Windows Store App):
<div>
<textarea id="wideBox" class="wideInput"></textarea>
<textarea id="small1" class="narrowInput"></textarea>
<textarea id="small2" readonly class="narrowInput"></textarea>
</div>
And the following CSS:
.wideBox {
width: 100%;
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: 50%;
box-sizing: border-box;
height: 200px;
float: left;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}
The effect that I'm after is a single wide text box with two, equally sized smaller text areas beneath.
This does work, however, the smaller text boxes just merge together. To counteract this, I tried introducing a margin of 1px, however, this had the effect of pushing the second smaller text box to the next line.
I've also tried adding a border to the boxes, but to no avail.
How can I get the effect of a gap, or delineator, without changing the overall layout of the page?
You can simply wrap your second row textarea's into another div's which would have 50% and padding-right to emulate gap between textareas:
/* textareas are inside this .wrap and have 100% */
.wrap {
width: 50%;
box-sizing: border-box;
float: left;
}
.wrap-first {
padding-right: 1px;
}
http://jsfiddle.net/dfsq/RHYSL/
Width % sadly does not work as expected. It is calculated as a % of the parent width and does not take margin and padding into account. If the parent is 100px wide and you set 50% width, it will be the same as setting 50px width. Now add padding 5px to this and you got a total 55px width which will push down one of the boxes. It is with my knowledge impossible to combine width % and margin/padding to make pixel perfect scaling without javascript. The best I can think of is this setting a slightly lower width, 49.5% instead of 50% and floating the textboxes left and right to keep the symmetry.
The textboxes will scale with parent size, but the distance between the two boxes will also scale because that 0.5% will be larger if the parent is larger.
<div>
<textarea id="wideBox" class="wideBox"></textarea>
<textarea id="small1" class="narrowInput left"></textarea>
<textarea id="small2" readonly="readonly" class="narrowInput right"></textarea>
<div class="clear"></div>
</div>
.wideBox {
width: 100%;
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: 49.5%; /* Note lower width */
box-sizing: border-box;
height: 200px;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}
/* Float to keep symmetric layout */
.left {
float: left;
}
.right {
float: right;
}
/* clear after float */
.clear {
clear: both;
}
I'm not sure if I've got your question correctly;
by the way, can you use CSS3 Calc ?
Demo: http://jsfiddle.net/4uc3N/
HTML
<div>
<textarea id="wideBox" class="wideInput"></textarea>
<textarea id="small1" class="narrowInput"></textarea>
<textarea id="small2" class="narrowInput"></textarea>
</div>
CSS
#wideBox {
width: calc(100% - 4px); /* A Trick */
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: calc(50% - 14px); /* Another Trick */
box-sizing: border-box;
height: 200px;
float: left;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}
Related
I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).
I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.
In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.
How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.
The image:
CSS:
#parent {
text-align: center;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
#child1-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
display: inline-block;
}
#child2-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
position: relative;
margin: 0 25px 0 25px;
display: inline-block;
}
#child3-row2 {/* The one with the red border */
vertical-align: middle;
height: 452px;
width: 949px;
overflow: hidden;
position: relative;
display: inline-block;
}
You can use flexbox to do this by using the flex-grow property.
HTML :
<div id="main">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
CSS :
#main {
display: flex;
flex-flow: row;
width:100%;
min-height:50px;
}
#box1{
background-color:red;
width:100px;
}
#box2{
background-color:blue;
width:100px;
}
#box3{
background-color:green;
flex-grow: 1;
}
Here is a working JSFiddle
You can use css calc function for this. Support for calc seems to be quite good now.
As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).
#red-div
{
width: calc(100% - 300px);
}
Add % width or you can do following :
$(window).resize(function() {
var window_width = $(window).width();
var w1_width = $('.div1').width(); // The first element width
var w2_width = $('.div2').width(); // The second element width
var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
$('.main_div_width').css('width', main_div_width);
});
I'm trying to create a remote control app using Cordova.
There should be 2 vertical sliders (<input type="range">, with my customizations (height, width, color, etc.). One should be on the left, positioned at 25% of the page width; and the other on the right, at 75% of the page width.
The sliders also should be centered on the correct point (ex. calc(25% - 20px); for the slider on the left if it is 40px wide, which it will be).
The only other requirement is that this webpage works on iOS Safari (really Cordova, but it uses Apple's WebKit which is basically the same). Opera/Firefox would also be nice. It does not have to be IE compatible (you're welcome).
I don't mind using Javascript/jQuery, but I would prefer CSS.
Also, for reasons unexplained, the sliders go off the top of the page, which must be fixed. One last bug with what I currently have is that applying position: fixed; left: 0px; to a slider does not move it completely to the left, so the centerInViewport() function is offset.
Here's a JSFiddle: https://jsfiddle.net/Coder256/6zjnk3qt/
I already tried -webkit-appearance: slider-vertical. It doesn't allow styling. For sliders, any -webkit-appearance value aside from none that I've tried doesn't let you style anything.
UPDATE: Sorry if I wasn't clear. The question is: How do I correctly position the sliders while keeping my customization, correctly being not too far up off the page and at the correct x position as described above?
The trick is to set margin-topto half of the sliders width to keep the sliders from being too far up off the page.
Same principle is for the x position. Use calc to set left to 25% / 75% minus half of the sliders width to get the correct position.
html, body {margin: 0; padding: 0; width: 100%; height: 100%}
h1 {
text-align: center;
}
.app {
width: 100%;
}
.sliders {
position: relative;
}
input[type=range].vslider {
-webkit-appearance: none;
transform: rotate(270deg) translateY(-50%);
margin-top: 200px; /* 50% of the width because of the transformation */
width: 400px;
height: 40px;
outline: none;
position: absolute;
}
input[type=range].vslider::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #777;
opacity: 0.75;
width: 25px;
height: 40px;
transform: translateY(-10px);
}
input[type=range].vslider::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: #444;
color: #444;
height: 20px;
width: 400px;
}
#LSlider {
left: calc(25% - 200px); /* 50% of the width because of the transformation */
}
#RSlider {
left: calc(75% - 200px); /* 50% of the width because of the transformation */
}
<div class="app">
<h1>RC Car Test</h1>
<div id="sliders">
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="LSlider" />
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="RSlider" />
</div>
</div>
What is the easiest way to make responsive dynamic div-s square, like in memory game (image below).
I have problem that user need to scroll down to see whole bottom part of game. How can I calculate (easiest solution) that whole my game is always visible. And also I want that to be dynamic (on image we can see 4x4 game, there should work for any number, 7x7, 10x10 and so on...).
Snippet of my code is: http://jsbin.com/nucovakevu/edit?html,css,output.
Everything in is added dynamically by JavaScript.
It also does not work where I do zoom in.
I am beginner in front-end developing and I mixed here bootstrap and plain css, which is probably not good solution.
Also I used this css trick to make my div as responsive square:
width: 23%;
height: 15vw;
It supposed to be something like:
width: 23%;
height: 23vw;
but I get rectangle in this case, because I obviously do not understand very well how this work.
Just call the function size(); whenever you want to update the grid.
Look at the comments within the code to understand better how this functions.
https://jsfiddle.net/xn5j4rcf/
window.addEventListener('load', function() {
size();
});
function size() {
var container = document.getElementById('container');
container.innerHTML = '';//don't want any extra boxes when you call this function again
var x = Math.floor(window.innerWidth / 50);//width of boxes that can fit; remove any decimal places
var y = Math.floor(window.innerHeight / 50);//height of boxes that can fit; remove any decimal places
for (var i = 0; i < x * y; i++) {//multiply x*y to get total area of boxes that can fit
var box = document.createElement('div');//create a div
box.className = 'box';//assign class
container.appendChild(box);//append
}
}
window.addEventListener('resize', function() {
size();//call the function again when the window is resized
});
.box {
width: 50px;
height: 50px;
padding: 4px;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
border: 4px solid #fff;//border for margin but use border-box to make sure the width and height are still 50px
background-color: #ddd;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
font-size: 0;//remove annoying margin from display:inline-block;
}
<div id="container">
</div>
This approach can be achieved, but a little odd kinky skills and compatibility is not good:
DEMO: response divs with full screen
Here is the use of a table-cell flexibility and writting-mode to change the direction of the flow
css code blow:
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrap{
width: 100%;
height: 100%;
-webkit-writing-mode: vertical-lr;
display: table;
table-layout: fixed;
background-color: #000;
}
.row-wrap{
display: table-cell;
}
.row{
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
-webkit-writing-mode: horizontal-tb;
}
.item{
display: table-cell;
height: 100%;
border: 1px solid #ffffff;
box-sizing: border-box;
}
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
There's a mysterious whitespace along the right of my site in firefox (on both PC and Mac, latest versions) and I can't for the life of me figure out what's causing it.
This is what it looks like -
I've been searching the CSS for ages now trying to figure out if it's some margin or padding issue but I can't find anything.
Also, if I remove the div ID 'slider3' the issue seems to disappear, yet I can't figure out how this div is causing the whitespace, since it has no CSS applied to it - it's simply a container.
Here's my site http://www.simplerweb.co.uk
Here's some relevant code so the answer is useful for people later on.
<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>
<div id="slider3">
<div class="quote">
<div class="centmid">
<h1 class="fronth">Hello</h1>
<h2 class="frontp">Welcome to Simpler Web</h2>
<h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
</div><!-- end div centmid -->
</div> <!-- end div quotes1 -->
<div class="quote2">
<div class="centmid">
<h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
</div> <!-- end div centmid -->
</div> <!-- end div quotes2 -->
<div class="quote3">
<div class="centmid">
<h2 class="frontc">We can translate your ideas into reality </h2>
</div> <!-- end div centmid -->
</div><!-- end div quotes3 -->
</div> <!-- #slider3 -->
</div>
CSS
/* The following styles are essential to the slider's functionality */
.plusslider {
overflow: hidden;
position: relative;
padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}
.plusslider-container { position: relative; }
/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }
.plusslider .child { float: left; }
/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */
/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */
/* End essential styles*/
/* The following styles are not essential for slider functionality. They are specific to the example content.
It is important to note that the fading effect does not work correctly with non-image content unless that
content area has a solid background (either a background image or a background-color, but not transparent).
Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; }
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; }
.slide1 { height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px; width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }
.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */
.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
#slider3 {margin: 0; padding: 0;}
You have (in FF) exactly 17px extra width that is exactly the width of the browser scrollbar.
Your starting (initial) loading black screen (that animates) leaves a glitch of 17px:
cause it's animation maintains the DOM width that equals the screen width without the right scrollbar (100% screen width).
After the page is fully loaded and the scrollbar is added to the page, it actually adds the extra 17px (to the 100%) width that were maintained by the Loading animation.
Hope I put you in the right direction.
By the way, try to add:
html {
overflow-y: scroll;
}
and - if still needed - adjust the loading element width as I mentioned before.
Add this:
body{
overflow-x: hidden;
}
Problem solved. (temporarily)
So where is the problem?
It is at your <div> with the classes plusslider slider3 plustype-slider. You are constantly setting an incorrect width to it. You have to subtract the scrollbar width.
You can also try to do this: Padding: 0px(or whatever) 17px; and margin: 0px(or whatever) -17px; now your whitespace at the sides are gone.