I'm working on a project in VUEJS where you login and see a dashboard with a sidebar. When I logout from the sidebar, the login page div moves to the right and is in the correct position only when I refresh. This is the styling for the Login div
.vertical-center {
text-align: left;
justify-content: center;
margin-top: 4%
}
.inner-block {
width: 450px;
height: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(68, 223, 12, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all 0.3s;
}
I know the spacing is from the sidebar. The issue persists even when I give the scoped attribute to the styling.
Related
I have been running into some weird issues with will-change: transform while I add this property to the img and div tags. Basically, I have a div as a container that contains an img element as its child and I am scrolling through these images in webkit. Adding will-change-tranform greatly improves the scrolling performance, but as you scroll you intermittently see images disappear(or hidden). Any answers to fix this problem would be great as I have exhausted most of the solutions I have tried from online resources.
I am attaching the code snippet for the CSS:
".cell" and ".pagNum" are class name attributes for the div.
".pageNum" is a page number div on top of the img div(.cell). ".cell" div contains the img element.
img {
position: relative;
-webkit-user-drag: none;
will-change: transform;
}
.cell {
position: absolute;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
will-change: transform;
}
.pageNum {
display: inline-block;
position: absolute;
top: 273px;
background-position: center;
text-align: center;
line-height: 36px;
min-width: 36px;
padding-left: 6px;
padding-right: 6px;
-webkit-border-radius: 3px;
background-color: rgba(0, 0, 0, .50);
color: white;
font-size: medium;
font-weight: bold;
text-shadow: 0px 1px 0px #000000;
left: 50%;
margin: 0px 0 0 -32px;
will-change: transform;
}
im using introjs, but I have a problem in somes pages of the website. I have a popup that appears in front of the page, however when I call the intro and point to elements in the popup, the images in the background appear above the popup (see image), without the intro the popup appears fine. And in other pages I do the same but all works good
the css of my popup is like this:
#popup_modal {
/* position: fixed; */
position: absolute !important;
height: 100%;
top: 50px;
width: 98%;
left: 1%;
z-index: 99999999;
overflow: hidden;
}
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
}
EDIT:
#popup_modal {
/* position: fixed; */
position: absolute !important;
height: 100%;
top: 50px;
width: 98%;
left: 1%;
z-index: 9999 !important;
overflow: hidden;
}
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
}
Introjs css:
.introjs-helperLayer {
position: absolute;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
border-radius: 4px;
box-shadow: 0 2px 15px rgba(0,0,0,.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Try adding a position: relative to the CSS for #popup to force layering to be calculated:
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
z-index: 999999999;
position: relative; // Default value is "static" but "relative" will cause layering to occur
}
Z-index values are usually ignored in statically-positioned elements, causing weird layering when you have other elements that use different types of positioning.
In my case I had this
After adding inline style in li element of sidebar (style="background-color:#347D87!important;") and adding property 'position:absolute' of class 'introjs-fixedTooltip' in original introjs.css file IT worked!!!
I have spent more than 10 hours with this issue I couldnt find better solution.
Updated:
https://github.com/usablica/intro.js/issues/532
just use this css :
.introjs-fixParent {
position: absolute !important;
}
introjs-fixPrent is placed on top parent of that element so and please use setTimeOut function to move on steps.
Within my index.html, I have created the following div, which is located within the center tag.
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
This looks like this on the page: [Progress Bar Image]1
I would like the blue bar, to be positioned to the left of this container.
Below is my CSS:
/* Progress Bar */
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
Once again, I would like the blue bar (div labelled bar or bar fill) to be positioned to the left inside the container.
Thanks.
Simply add margin-left: 0px; to .bar-fill
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
margin-left: 0px;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
The element is already left based on the code provided.
There is no center tag in your HTML and, in any event, the tag has been deprecated and should no longer be used.
.container {
width: 400px;
margin:auto; /* center the container */
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
If the container div is inside a <center> tag which cannot be removed then setting the text-align of the tag to left should have the desired effect.
JSFiddle Demo
i m trying to make a pop up table which happens next to the biggest div that i have(right side) when the user clicks on the white button. But i m kinda out of ideas about how to do it. Is there any way to do it with bootstrap? If not still any tipps would be greatly appreciated !
https://jsfiddle.net/e97ut32r/
<div id ="a">
<div id ="b"></div>
<button></button>
</div>
#a {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
height: 300px;
border-radius: 25px;
}
#b {
border: 2px solid #a1a1a1;
padding: 20px 100px;
background-color: white;
width: 10%;
height: 50%;
border-radius: 25px;
float: left;
margin: 5px;
}
button{
margin-left: 1cm;
margin-top: 20%;
}
You can use modals, basically is an overall div where you can put any kind of content.
http://getbootstrap.com/javascript/#modals
Just look at my code
http://jsfiddle.net/rkumarnirmal/GXAYa/6/
#box_bg is the outer gray box and #box is the inner black box. I used jquery accordion in the #box. What I need is #box_bg should dynamically enlarge or reduce its height according to the size of the inner #box.
Could anyone help me?
Thanks!
Don't specify an absolute height: just use height:auto. With a static position of #box and some padding for the frame the #box_bg will automatically resize to its content.
See http://jsfiddle.net/GXAYa/18/
I'm not sure why you need the position: absolute, so try this as an option and see if it resolves your problem:
#box_bg {
cursor: move;
background-color: #4f575e;
border-radius: 10px;
-moz-box-shadow: 3px 3px 5px 6px #00000;
-webkit-box-shadow: 0px 3px 5px 6px #00000;
box-shadow: 0px -3px 3px 1px #4f575e;
overflow: hidden;
width: 245px;
position: relative;
padding-bottom: 2em;
margin-left: 100px;
margin-top: 150px;
}
#box {
cursor: pointer;
background-color: #24272a;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0px 0px 3px 1px #4f575e;
width: 225px;
margin-top: 20px;
padding: 10px;
word-wrap: break-word;
}
JSFiddle here.
Change height:260px; to height:auto;.
UPD: Add position:relative to the #box