What I want to achieve is this
To get this, I made a div (.toolbar-left) with this style
.left-toolbar {
width: 300px;
background: #ddd;
padding: 15px;
float: left;
height: 100%;
}
I also made the .paint div with this style:
.paint {
margin-left: 300px;
height: 100%;
}
I'm also using these styles in case they have something to do with my problem:
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Montserrat', 'sans-serif';
font-size: 14px;
height: 100%;
}
This works properly, but as soon as I add a canvas element with width and height 100%, a vertical scrollbar gets added.
I check their sizes and everything (divs, body and canvas) have the same height.
So, why am I getting the scrollbar?
EDIT: Made a JSFiddle: http://jsfiddle.net/5Rrtp/
You just need to add display block to the canvas
CSS
#paint_canvas {
height: 100%;
width: 100%;
display:block;
}
Related
I'm trying to set #app to 100% height, can't make it happen.
Is div #app not considered a child of Body? i have this problem everytime, and everytime I have to work around in a different way.
Is there a way to completely avoid this to happen ?
CSS:
* {
margin: 0;
padding: 0;
font-family: "Nunito";
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
height: 100%;
}
body {
transition: background 0.25s ease-in-out;
min-height: 100%;
}
#app {
max-height: 100%;
min-width: 100%;
position: relative;
}
You can use viewport height units for this issue, they work in terms of the height of the overall viewport.
#app {
height: 100vh;
}
This is not vue issue, but likely under CSS Height % issue
You probably need to declare the code below for height:100% to work for your divs
html, body {
margin:0;
padding:0;
height:100%;
}
P/S: Perhaps it's time for give a try for flexbox
My task was - max Body width - 1980px. There may delete limits of width.
html {
max-width: 1980px;
margin: 0 auto;
height: 100%;
}
body {
font-family: Arial sans-serif;
color: $textcolor;
margin: 0;
padding: 0;
width: 100%;
max-width: 1980px;
min-height: 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
#app {
height: inherit;
width: inherit;
}
I have a problem with a border in Chrome. The green border has some grey lines.
Firefox: not visible -> ok!
Chrome: not visible but visible in the dev tools, mobile phone.
Chrome on my phone: visible
Here is a screenshot that shows my problems!
https://abload.de/img/cssiee7s.jpg
1) When you go to http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php
there are two small grey lines
2) When you go to http://www.seelenpuls.at/hpneu/m_neues_de.php there are even more problems.
3) The menu button has an orange border (mobile only) ... and I don't know why as there is no such color in my CSS.
Please help!
Here's the code. The bold part is the border that causes the problems.
* { padding: 0; margin: 0; }
body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}
#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}
#logo {
position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}
#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}
#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}
#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}
Ok so there is a couple of things that are going on in your css.
White lines
For your content div, I would use a width of 100% for mobile devices now, as you scale to tablets and desktops you can change to a more fixed or fluid width. I would also remove the border bottom property. This is not fully extending to the width of the content box and I am unsure if it has to do with the border-sizing property you are using. I would also apply the border-sizing this way so it is applied to every element in your html
* {
box-sizing: border-box;
}
Orange border - this is caused by the :focus pseudo css property of the button you are using, you can remove it this way
button:focus {
outline: none;
}
CSS Normalize or CSS Reset - consider using one of these stylesheets in your website. They help you rendering all elements more consistently through all browsers. This will save you the time of remove the :focus property, like I mentioned above in any project moving forward. Most popular CSS frameworks utilize this to normalize basic styles.
Link to Normalize.css
I'm writting an opesource filemanager in c++ (with css stylesheet) who can be accessed trough a web browser.
I have a layout problem when long text is beside some icons :
the same image with more colors (for helping to read the stylesheet) :
revelant css code :
.rowLayout{ /* the gray row */
display: table;
background-color: #bbbbbb;
width:100hw;
min-width:100hw;
max-width:100hw;
}
.rowLayout img { /* icon */
display: table-row;
background: #ff0000;
max-width: 50px;
max-height: 50px;
min-width: 50px;
min-height: 50px;
position: absolute;
left: 67%;
-webkit-transform: translateX(67%);
transform: translateX(67%)
}
.img-txt { /* the text beside the icon */
background-color: #ffaaaa;
display: table-row;
text-align: center;
max-width:120px;
word-wrap:break-word;
position:absolute;
vertical-align: top;
}
.contentLayout { /* rows container */
background-color: #ffffff;
display: block;
overflow: hidden;
overflow-y: auto;
border-style: solid;
border-width: 1px;
border-color: #c4c1bd;
width: calc(100% - 30px)
padding: 10px 10px 10px 20px;
min-height: 50px; /* do not touch me */
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* special item, stretch through the code to avoid the icons evenly positioned */
.unusedSpace-box{
width:0;
min-width:0;
max-width:0;
height:0;
min-height:0;
max-height:0;
}
if you check .img-txt you'll see I should have some pink color somewhere. That color disapear when I add to much rows. For example with less rows :
in blue is what I want, the red arrows on the last picture means I want to paste at the top of the div.
Since the code is generated via C++, I don't have html but the one I can see from firefox :
n.b. : the <p></p>are irrevelant, they should not be there it was a try. There or not, that changes nothing.
if anything else would be revelant, just tell.
I have designed responsive website viz working perfectly in laptop and landscape view of Tab and mobile.
When I've checked that in portrait view body tag is not covering full screen, A white vertical band appear in right side of the screen.
Landscape view:
No error... Working Perfectly...
Portrait View:
Body is not covering full page....
Body tag CSS:
body{
font-family: 'Raleway','Arial Narrow', serif;
width: 100%;
font-weight: 400;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
margin:0 !important ;
padding:0 !important
}
You've used box-sizing: content-box; for the class fs-container viz causing the issue, its your <body> is covering your full website but due that property on class there is white-space.
I've used this CSS:
#media screen and (max-width: 570px) {
.fs-container {
position: relative;
width: 100%;
padding: 0 20%;
max-width: 100%;
left: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fs-block {
width: 100%;
}
}
#media screen and (max-width: 380px) {
.fs-container {
padding: 0 15%;
}
}
on particular media-query, please try this, it will do the trick for you.
I check this in my Developer Tools and everything worked fine.
Maybe the problem is your code you posted:
overflow-x: hidden;
margin:0 !important ;
padding:0 !important
Please check your semicolon:
overflow-x: hidden;
margin:0 !important;
padding:0 !important;
Make sure you are using a universal selector for margin and padding.
* {
margin: 0;
padding: 0;
}
Sometimes it will create some problems.
I have a simple div in which I have 2 textarea. I set the textarea's width to 100% but then it just go a little out of the div.
See this fiddle.
HTML:
<div class="offer_a_help">
<textarea></textarea>
<br/>
<textarea></textarea>
</div>
CSS:
.offer_a_help {
width: 350px;
height: 250px;
position: absolute;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border-radius: 5px;
border: 1px solid #bbb;
}
.offer_a_help textarea {
width: 100%;
}
Why is that happening and what's the simplest way to fix this?
I believe it may be an issue with the textarea having either a border or padding. Both of those would be calculated with the 100% width and cause the width to be wider than the container.
You can add border-box to make the padding and border be calculated WITH the width instead of IN ADDITION to
Try adding:
.offer_a_help textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You need to reset padding and margin (I've set margin to -1 to accomodate outer div border):
Demo
.offer_a_help textarea {
width: 100%;
margin: 3px -1px;
padding: 0;
}
Change your css to this.
.offer_a_help textarea {
width: 100%;
margin:0;
padding:0;
}
You can also add padding to your .offer_a_help class
http://jsfiddle.net/YE5MP/5/