So this is the how the page looks, I would love to place the map below the coordinates field in the form? I am bit new to the styling so can you guys please help me achieve this. The raw source from the webpage has been pasted below in the js fiddle link.
<div>
<p class="hilite">Example of code</p>
</div>
<div>
<span class="hilite">More example of code</span>
</div>
.hilite {
background-color: yellow;
}
This above code is just dummy code to post this question with a minimal reproducible example.
Remove the absolute positioning from your map and give it some height:
https://jsfiddle.net/Sixtus78/wvpc9mt3/3/
<style>
#mapDiv {
z-index: 1;
background-color: grey;
box-shadow: 3px 3px 10px 1px;
overflow: hidden;
height: 300px;
}
</style>
Welcome!
To shift the map below the coordinate field remove the following css from the #mapDiv
position: absolute;
z-index: 1;
top: 30%;
bottom: 10%;
right: 5%;
left: 60%;
and just add the css
#mapDiv {
height: 300px;
width :300px;
}
Because of position:absolute and other properties like top,left it was not working.
Hope this might help you.
Related
I am trying to implement a arrow-headed div. Below is the part of the code that is relevant to the post/question. I have been trying to figure out how to get this done for a while now but no success.
I have a grandparent div, a parent div with a child as follows
<div className="main-segment-container">
<div className="panel panel-default segment-select-box">
<div className="panel-header segment-select-box-header">MAIN SEGMENT</div>
<div className="panel-body segment-select-box-body">
<div className=has-subsegments'>
<input type="checkbox" className="form-check-input" value={checkedSegment.category_id} onChange={this.segmentChecked} />{' '}
<label className="form-check-label">{checkedSegment.name}</label>
</div>
</div>
</div>
</div>
Here is what I am trying to achieve (notice the arrowhead):
I am able to achieve this with this css:
.main-segment-container{
width: 100%
}
.has-subsegments{
background-color: #215C64;
width: 100%;
color: #fff;
position: absolute;
height: 30px;
}
.segment-select-box {
border-radius: 3px;
width: 100%;
/* max-height: 400px; */
/* overflow: scroll; */
position: relative;
}
.segment-select-box-body{
width: 100%;
max-height: 400px;
overflow: scroll;
padding: 0px;
display: inline-block;
}
.has-subsegments::after{
content: "";
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
border-left: 21px solid #215C64;
width: 0;
height: 0px;
right: -20px;
top: 50%;
}
Problem:
When I use the css above, the .has-subsegments element seems to be at a fixed position when I scroll. Like this:
Question
How do I implement scroll without removing the element from the normal position?
Note:
When i remove scroll from .segment-select-box-body class, everything works perfect but the children list becomes very long, therefore a scroll is needed.
adding position: relative; to .segment-select-box-body class makes the :after pseudo-element invisible.
EDIT
See JSFIDDLE here : https://jsfiddle.net/uuwhndgu/16/
EDIT
Thanks for posting the jsfiddle. I don't think, what you're trying to achieve is possible the way you are trying to do it.
I updated the fiddle with a suggested workaround/fix: https://jsfiddle.net/uuwhndgu/34/
what I did, is giving the wrapping col a little more width (you probably would have to either increase the col to .col-md-3 or decrease the width of .segment-select-box a little. You probably need to do the latter anyway), a max-heightof 200px and a overflow-y: scroll;. I set the width of .segment-select-box to 90% and changed position: absolute;of .has-subsegments to position: relative;. I don't know if this helps you but I BELIEVE, that there aren't many ways to achieve what you are trying to achieve.
Original answer
I am not quite sure how you intend this thing to behave. But if the highlighted entry (the one with the arrow) just ought to stay where it was, I think you can simply replace position: absolute; with position: relative; in your .has-subsegments class. Now, I wasn't able to recreate this anything close to perfectly, because it's a react app, but still, you should get the idea:
with position: absolute; on .has-subsegments
with position: relative; on .has-subsegments
.holderDiv{
position: relative;
}
.shadowSimulation{
position: absolute;
background-color: black;
height: 60%;
width: 611px;
bottom: -10px;
left: -10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="holderDiv">
<img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg">
<div class="shadowSimulation"></div>
</div>
</body>
</html>
I have attached an image of what I need to get.
In the code sample, I have tried with z-index but still not a result.
I need to get the black part back to the image. That's it.
I found answer myself, the solution was to give position: relative to an image and higher z-index: as well.
Have you tried to add a shadow directly to the image or the div that contains it?
It maybe a better solution because of problems with different web browsers.
Here is a codepen with a modified example, and code below, hope it helps
css:
.holderDiv {
position: relative;
margin-left: 30px;
margin-bottom: 30px;
width: 611px;
box-shadow: -20px 20px 0 Gray;
}
I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
HTML:
<div>
<img src="some/path/" class="thumbnail" />
<input type="file" class="image_upload" />
</div>
CSS:
div
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
.thumbnail
{
width: 100%;
}
.image_upload
{
opacity: 0;
position: absolute;
}
I want <img> and <input type="file"> to overlap with each other and both fill up their parent <div>. How can I fix my CSS to achieve that?
It is not possible to change the size of a file input. You could redesign the file-input and, but the size of the clickable area isn't modifiable.
Edit: Aaron shows a first trick, and I added the second one, so see this fiddle in which the whole image is clickable for the file input.
The trick is to set font-size to a large value, then opacity to zero and finally add overflow: hidden to the parent element.
File input fields don't really play by the rules (or at least as you'd expect). To accomplish what it sounds like you're after, you've gotta get creative. Example: http://jsfiddle.net/ZTPCd/
Its Possible.
Add this css for input type file
.My_CSS {
opacity: 0;
border: none;
border-radius: 3px;
background: grey;
position: absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
You'll need to add relative positioning to the parent div, so the input field won't be positioned relatively to the browser window. (Google for more info about absolute/relative positioning).
And you'll have to add some specific positioning (top/left) to the input tag.
http://jsfiddle.net/NbhQY/
(Your outer div will have to be a little bit bigger, though, if it needs to include a file upload.)
Here you need to use some JavaScript. Since I don't see any way to change the CSS for input(type=file) itself, I made it hidden but the <div> responsible for <input type='file'>.
var box = document.getElementById("box");
var file = document.getElementById("file");
box.addEventListener('click', function(){
file.click();
})
#box {
font-size: 30px;
text-align: center;
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #999;
position: relative;
}
p {
position: absolute;
top: 80px;
color: white;
}
#file {
width: 100%;
height: 100%;
visibility: hidden;
z-index: 100;
}
<div id="box">
<img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/>
<input type="file" id="file"/>
<p>Click to import</p>
</div>