I have an element which displays process arrows. If I reduce the screen size, the edges from the outer process steps are being cut off.
It seems, that the borders of the Bootstrap column get over the arrows.
How can I protect the element from being cut off?
<div class="row">
<div class="col-md-4">
<h2>Headline</h2>
</div>
<div class="col-md-4">
<div align="center" class='steps-container'>
<div class='steps active'>
<span>Step 1</span>
</div>
<div class='steps' routerLink="/Step2">
<span>Step 2</span>
</div>
<div class='steps'>
<span>Step 3</span>
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
.steps-container {
overflow: hidden;
margin: 0px;
padding: 0px;
white-space: nowrap;
border-left: 0px solid;
border-right: 0px solid;
width: 100%;
counter-reset: steps;
}
.steps {
position: relative;
display: inline-block;
left: -28px; /* -2px default + 26px offset to hide skewed area on the left side of first element*/
height: 50px;
line-height: 50px;
margin-left: 0px;
margin-right: 0px;
counter-increment: steps;
cursor: pointer;
transition: background 1s;
min-height: 50px;
min-width: 150px;
}
.steps:after,
.steps:before {
position: absolute;
left: 0px;
height: 50%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
border-left: 3px solid; /* thicker border as skew makes them look thin */
border-right: 3px solid;
}
.steps:before {
transform: skew(45deg);
top: 0px;
border-bottom: none;
transform-origin: top left;
}
.steps span {
display: block;
padding-left: 40px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 75%;
}
...
Related
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
I'm trying to add page-to-top code to a page. Everything works fine except for the positioning of the "to top" button.
I've shown the problem in this jsfiddle. You can see the To Top in the lower right. I need it to be in the lower right of the middle div.
My code is below. I looked up the fixed position description and it says it aligns to the viewport. Is there a way to override that so it aligns to a specific div?
.layout {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
}
#toTop {
padding: 5px 3px;
position: fixed;
bottom: 0;
right: 5px;
z-index: 100;
}
<div>
<div class="layout">Left column</div>
<div class="layout">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
You should add position: relative; to .layout and position: absolute; to #toTop. The absolute positioned element will have its relative parent as base
.layout {float:left; width:150px;height:200px;border:1px solid red;position: relative;}
div > span { position: absolute; right: 0; bottom: 0; }
https://jsfiddle.net/oe9fqv3p/13/
This will do it for you.
I added the relative position and in the div > span positioned it absolute and right 0 and bottom 0
I have changed couple of styles in your CSS code. The example is here
https://jsfiddle.net/2yms90qz/
Though i am not sure if you want something like this. Please let me know.
I have removed float from your divs and added inline-block as display. Also changed some position value to achieve the result.
.layout {display: inline-block; width:150px;height:200px;border:1px solid red;}
.middle {
position: relative
}
#toTop {
/* padding: 5px 3px; */
position: absolute;
bottom: 0;
right: 0;
z-index:100;
}
<div>
<div class="layout">Left column</div>
<div class="layout middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
.layout should be positioned and .top should be absolute.
.layout{
position:relative;
}
.top{
position :absolute
}
please see
https://jsfiddle.net/ainouss/39ezf0yj/1/
If you want to keep that "To Top" button always visible on the bottom of the viewport, then you would have to position it relative to the viewport in a way that it matches the location you want, relative to the parent.
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 10px;
z-index: 100;
right: calc(35vw + 10px);
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
Note, however, that as you pointed out in your comment, this means the "To Top" would still be visible even when you scroll past that first .container element.
To avoid that, if you just want that button to be at the bottom of its column, even if that's outside of the viewport and the user needs to scroll down to get to it, then you should use position: absolute instead and also add position: relative to .layout:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
To get the best of both worlds, and make the "To Top" button stay at the bottom of the viewport until the end of the first .container is reached, and remain inside it when the user scrolls past it, you could use position: sticky:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
top: calc(100vh - 49px);
float: right;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
The only problem with this approach could be browser support.
In that case, if you really need this feature/behaviour, you could implement your own sticky element using JS and listening for the onscroll and 'onresize' events.
Alternatively, you can use JS to check if position: fixed is supported and apply one solution or another:
const hasSticky = (() => {
const el = document.createElement('div');
el.style.cssText = "position:sticky;position:-webkit-sticky;position:-ms-sticky;";
return el.style.cssText.indexOf('sticky')!==-1;
})();
if (hasSticky) {
document.getElementById('totop').classList.add('sticky');
}
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop.sticky {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
bottom: auto;
top: calc(100vh - 49px);
right: auto;
float: right;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
I changed the scroll code I was using to look for the last button on the page and to hide the To Top button when it reached it. Here is my updated jsfiddle and code. The numbers are not quite correct but I'm just posting this in case someone else runs across this problem. I'm not sure if it is the best solution but I've tested it here and it seems to work fine. My tnaks to all who replied.
<style>
.container {
display: flex;
height: 150vh;
width: 100vw;
}
.layout {float:left; width:150px;height:250px;border:1px solid red;}
.layout-middle {position:relative;float:left; width:150px;height:250px;border:1px solid red;}
#toTop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 60px;
z-index: 100;
right: calc(45.33333333% + 10px);
outline: none;
}
</style>
<div class="container">
<div class="layout">Left column</div>
<div class="layout-middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
<div><button id="button-isvisible">Button</button></div>
<script>
$(document).ready(function($){
var offset = 20;
var duration = 500;
$(window).scroll(function() {
var continue_button_pos = $('#button-isvisible').offset();
var button_top = continue_button_pos.top - 350 ;
if ($(this).scrollTop() > button_top) {
$('#toTop').fadeOut(duration);
} else if ($(this).scrollTop() > offset) {
$('#toTop').fadeIn(duration);
} else {
$('#toTop').fadeOut(duration);
}
});
});
</script>
I have a textbox and a validation message assigned to it. I am trying to put the validation message inline to the textbox, but it comes just under it. I have tried different options but none of them is working. Below is the code for the same:
HTML
<div class="col-lg-3 wrap">
<span>
<input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
<span class="vspan" style="display: inline-block;">Please enter Name</span>
</span>
</div>
CSS
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
/*position: absolute;*/
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
/*visibility: hidden;*/
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 20px
}
.wrap span:first-child {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap span:first-child:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
Here is a Demo for the same.
The desired output is:
Any help will be appreciated. Thanks.
The easiest way is to use CSS Flexbox. Make your <span> a flex container instead of inline-block, just like this:
span {
display: flex;
}
Have a look at the snippet below:
/* CSS used here will be applied after bootstrap.css */
input[type=text].vtooltips {
position: relative;
display: inline;
height: 20px;
}
.vspan {
/*position: absolute;*/
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
height: 20px;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
/*visibility: hidden;*/
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 20px
}
.wrap span:first-child {
display: flex;
position: relative;
overflow: hidden;
width: 100%
}
.wrap span:first-child .input-holder:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
body {
margin: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 wrap">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName"></span>
<span class="vspan" style="display: inline-block;">Please enter Name</span>
</span>
</div>
Hope this helps!
Please do below changes :
<div class="col-lg-3 wrap">
<span>
<input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 70%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
<span class="vspan" style="display: inline;">Please enter Name</span>
</span>
</div>
please refer Demo from here :
Just add below css..
span.vspan{
margin-top: 5px;
display: flex;
}
.wrap span:first-child {
display: flex;
}
This MDN article explains the stacking context and floats. Here is the example they provide:
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/* opacity: 0.7; */
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<br />
<br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>
<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>
<br />
<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>
In the example, div#1 should belong to category 5 (Descendant positioned elements) and div#3 should belong to category 3 (Floating blocks). So div#1 should be over div#3. Why is it below in the example?
Stacking order and opacity
The stacking order is affected by the opacity property. This is noted in the article you linked to:
Note: In the example below, all the blocks except the non-positioned one, are translucent show the stacking order. If the opacity of the non-positioned block (DIV #4) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks. I was not able to understand whether this is a bug or a peculiar interpretation of the specifications. (Applying opacity could implicitly create a stacking context.)
Testing this theory
Let's reduce the markup to include just the two divs in question. Here is the scenario we see; the absolutely positioned div1 is underneath div3:
div {
padding: 20px;
}
#div1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Now, let's remove the opacity properties (specifically the one on div3). The stacking order is now as you expect it to be:
div {
padding: 20px;
}
#div1 {
/*opacity: 0.7;*/
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
/*opacity: 0.7;*/
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Read more
Here is an in-depth write-up on how the opacity property affects the stacking order.
I am trying to achieve the box-shadow inside the right-border, currently everything is working fine except the shadow is getting display outside the right border. Following is the js-fiddle sample code I have tried...
http://jsfiddle.net/5y1guk6d/1/
HTML:
<div class="header">
<div class="header-bar">
<h1 class="title">Page title</h1>
</div>
</div>
<div class="main">
<div class="left-bar">
<div class="menu">
Menu Content
</div>
</div>
<div class="content">
Main content area
</div>
</div>
CSS:
.header {
width: 100%;
height: 40px;
top: 0;
color: white;
}
.header-bar {
height: 100%;
overflow: hidden;
background-color: #009BE1;
}
h1.title {
display: inline-block;
font: bold 16px Arial, sans-serif;
margin: 0 5px 0 15px;
position: relative;
top: 25%;
}
.main {
width: 100%;
overflow: hidden;
position: absolute;
top: 48px;
bottom: 0;
}
/* left bar */
.left-bar {
width: 160px;
float: left;
padding:10px;
background-color: #F0F0F0;
height: 100%;
position: relative;
border-right:1px solid #aaa;
box-shadow:5px 0 5px #ccc;
}
.content {
overflow: hidden;
left: 12px;
padding: 5px 17px 5px 5px;
height: 100%;
position: relative;
}
Appreciated your help..
If you want the box shadow to appear inside of the element instead of outside, use inset. Then you want to invert the x-offset so it appears on the right side.
box-shadow:inset -5px 0 5px #ccc;
http://jsfiddle.net/5y1guk6d/3/