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
Related
I have this div that shows a top red bar. I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border left using this code? Thanks in advance!
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
background-color: red;
}
<div class = "container">this is a text</div>
This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
width: 6px;
inset: 0;
background-color: red;
}
<div class = "container">this is a text</div>
Perhaps just simplify it to a border?
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
border-left: solid 8px red;
overflow: hidden;
}
<div class = "container">this is a text</div>
You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after
Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
See snippet below:
.container {
position: absolute;
display: block;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border-left: 6px solid red;
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
}
<div class = "container">this is a text</div>
You can also use a mixed border style and use hidden for the top, bottom, and right.
usage is described at W3Schools
There is a bootstrap popover already present. It need to display on hover.
Here is the result showing right now :
In red color button see light outline of red color, its done when button clicked. What i need is, when mouse hover on red or green button it should high light like screenshot of red button highlighted.
Here is the code i used:
<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle"
data-toggle="popover" data-placement="right" data-content="{{.Status}}">
<i class="glyphicon glyphicon-ok"></i>
</button>
.btn-circle.btn-lg::hover {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle:hover {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 25px;
opacity: 1;
border-width: 3px;
}
In .statusButtonClass, I am getting value of color. Default.json file status is terminating ten red color, if its running then color is green. class="btn {{.Status | statusButtonClass}} btn-circle.
see code below:
.button {
position: relative;
border-radius: 50%;
background-color: red;
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid pink;
opacity:0.8;
}
<button class="button"></button>
For your comment
I use css variabels:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
And declare new pipe to border-color calls:statusButtonBorderColor
CSS:
.button {
position: relative;
border-radius: 50%;
background-color: var(--color);
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid var(--borderColor);
opacity:0.8;
}
Example for CSS variables:
.button {
position: relative;
border-radius: 50%;
background-color: var(--color);
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid var(--borderColor);
opacity:0.8;
}
<button class="button" style="--color:red;--borderColor:pink"></button>
You can apply a box-shadow on hover and this will achieve the look you want.
.btn-circle {
width: 60px;
height: 60px;
border-radius: 50px;
}
.btn-danger{
background-color:red;
border-color: red;
}
.btn-danger:hover {
box-shadow: 0 0 1pt 4pt #f47f90;
}
You can apply .btn-danger via json (or whatever you wish to call it)
More details on box-shadow can be found here
I have also created a pen.
I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!
You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
I have a button within a div. The div parent has position:absolute and is positioned fully to the left in the browser window. The child button has position:fixed, because I want the child button to always be a certain distance from the bottom of the browser window (regardless of the parent div).
What I want is to horizontally center the parent div in the browser window (best way to do that?); however, the child button is then in the wrong x-location, since it should be relative to the div but is fixed. Essentially the x-location for the button should be relative to the parent div, whereas the y location should be relative to the browser window (i.e., fixed).
How can I accomplish this?
http://jsfiddle.net/YfWWH/
<body>
<div class="viewport">
<button id="t">T</button>
</div>
</body>
.viewport {
background: white;
height: 1024px;
height: 900px;
width: 768px;
margin: 0em auto;
overflow: hidden;
position: absolute;
}
#t{
height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
left: 57.7em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}
http://jsfiddle.net/YfWWH/8/
Just remove the absolute property from the parent and the left property from the child.
.viewport {
background: white;
height: 1024px;
height: 900px;
width: 50px;
margin: 0 auto;
overflow: hidden;
}
#t{
height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}