so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
Related
1- There is a tooltip that opens when hovering the cursor over the icon. But when the screen starts to shrink a little, the div starts to change position. How can I prevent this?
EDIT: It was enough to give the properties to the .installmentinfo__container class margin: auto; and transform: translateX(-250px);
2- I have another question. As you can see in the image below, the tooltip that opens does not open exactly under the icon. I don't want a space between the dropdown tooltip and the icon.
Note: The tooltip that opens should appear at the bottom left of the icon.
EDIT: I fixed problem 2.
The picture I'm talking about;
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
right: 340px;
background-color: white;
&:last-of-type {
border-bottom: none;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
it's hard to understand by looking at these code examples.
My guess is because of "right: 340" value. If the "position: relative" doesn't have a parent element, the current element will always shift 340px from the right.
To prevent this, you may need to give "position: relative" to the parent element where the ".installmentinfo__container" is located. After that, you can use "right: 0".
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
<img src="uploads/images/dark_knight.jpg">
</div>
I want image to be resizeable hence,
element.style {
border: 1px solid;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).
so what changes should I do in order to bring cursor below a div on pressing key down?
Demo: http://jsfiddle.net/u37cxxbh/2/
Make div contenteditable="false" and add textarea element next to image. As in example above.
Simply adding
contenteditable="false"
to the div containing the image seems to solve the problem.
#editor {
overflow: scroll;
max-height: 250px;
height: 250px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
div {
display: block;
}
<div id="editor" contenteditable="true">First line
<div>
//after clicking down arrow key cursor going inside an image div
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
<img src="abcd.jpg">
</div>
</div>
<div>
<br>
</div>
<div>Last line</div>
</div>
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)