please help solve the problem.
there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
background-color: #fff;
}
body > .appointment_mobile > .container {
padding: 0px 15px 0;
}
please help remove the lower scrolling.
Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.
This code is better if you just want to hide the top & bottom paddings.
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container class.
you can use
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
EDIT :
You used to many .container class, when you use only one or two, it solves your problem.
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
Hope it helps :)
.container > .row {
margin-left: 0;
margin-right: 0;
}
http://jsfiddle.net/52VtD/11248/
Related
I am using sb-admin project how to set CSSpage wrapper ... it shows small background. I don't know why.
please check
body {
background-color: #000216;
height:100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: #F4E8FF;
}
If you're talking about the colored background not expanding with the content...I would try adding float:left on the wrapper and page-wrapper selectors in your CSS.
I would like to have 4 panels (sections).
The 2 top ones should be along the whole width.
The 2 others should be next to each other.
The top one should have no margins at all.
The 2nd panel should have no top-margin (and no bottom-margin to
avoid a double one with the ones below).
The problem here is: The 2 panels next to each other have a double margin in the middle. In this case it's 10 + 10. I need them to be 5 both in order to get a total of 10px. However, when I apply this to my code then the extra space left over would end up on the right..
Can anyone help with a solution? Rewriting any code to improve (making it easier to maintain) is also welcome :).
EDIT:
I had my container width to 240px for testing the flex i made. This caused the extra space on the right when applying the margin of 5. However, there should be a way to avoid this double margin with any container width. Does anyone have a solution?
EDIT:
Had to set the flex-grow to true. Now the margin of 5 + the grow possibility seems to fix the problem. No matter what container size I have.
body {
background-color: #cccccc;
}
#container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
background-color: #444444;
width: 270px;
}
#container > * {
width: 100px;
height: 100px;
background-color: #228822;
flex-basis: auto;
}
#container .neighbour {
flex: 1 1 auto;
margin: 10px 0;
}
#container .solo {
flex: 1 1 100%;
}
#container .solo.red {
background-color: #ff0000;
}
#container .solo.small {
height: 30px;
margin: 0;
}
#container .solo.no-top {
margin: 0 10px;
}
#container .left {
margin-left: 10px;
margin-right: 5px;
}
#container .right {
margin-left: 5px;
margin-right: 10px;
}
<div id="container">
<section class="solo red small"></section>
<section class="solo no-top"></section>
<section class="neighbour left"></section>
<section class="neighbour right"></section>
</div>
.no-right{
margin-right:5px;
}
.no-left{
margin-left:5px;
}
Does tagging that to the end of your stylesheet work?
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
Currently, I'm using
<hr align="left" />
on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
hr{align: left; max-width: 800px;}
or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.
So what should I use instead of the inline attribute above?
One option would be to set the left margin to zero:
hr{max-width: 800px; margin-left:0;}
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
hr {
max-width: 100px;
margin: 0px;
}
A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:
p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}
I don't know what browsers were used for some above answers, but I found neither text-align:left nor margin-left:0 worked in both IE (11, Standards mode, HTML5) and Firefox (29).
IE11: text-align:left works, margin-left:0 leaves rule centred.
FF: margin-left:0 works, text-align:left leaves rule centred.
So, either use both, or I found that margin-right:100% works for both!
You can use div tag instead.
<div style="border: thin solid lightgray; width: 100px;"></div>
do this
hr {
display: inline; //or inline-block
text-align: left;
}
<hr> tags have margin-inline-start and margin-inline-end properties set to auto, which centers the element horizontally (similar to setting both left and right margins of an element to auto).
To left-align an hr tag, you can set margin-inline-start to 0:
hr {
margin-inline-start: 0;
}
...and you can right-align an hr tag by setting margin-inline-end to 0:
hr {
margin-inline-end: 0;
}
.line {
height: 2px;
background-color: var(--itemBorder);
color: var(--itemBorder);
}
.width100 {
width: 100% !important;
}
.width90 {
width: 90% !important;
}
.width80 {
width: 80% !important;
}
.width70 {
width: 70% !important;
}
.width60 {
width: 60% !important;
}
.width50 {
width: 50% !important;
}
.width40 {
width: 40% !important;
}
.width30 {
width: 30% !important;
}
.width20 {
width: 20% !important;
}
.width10 {
width: 10% !important;
}
<div class="line width100" />
Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!
Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1
Here's the relevant CSS:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}
div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}
Here's the relevant HTML:
<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
<div class="comcon abs" style="opacity:none;">
<div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">
<?php
if($_GET['page'] == "profile") {
include_once('profile.php');
}
if($_GET['page'] == "editprofile") {
include_once('editprofile.php');
}
?>
</div>
</div>
</div>
Do this:
body.combody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
background-origin: padding-box;
background-position: left center;
background-repeat: repeat;
background-size: 110% auto;
height: 100%;
}
div.comborder {
background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
border-radius: 30px 30px 30px 30px;
height: 100%;
width: 900px;
z-index: 10;
}
What is important to notice is that both the body and the div have a 100% height.
That might help you.
Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.
Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.
More general advice:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:
.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }
It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.