I'm trying to integrate a scroll bar in the following div of my HTML template, and want the "box" to always show, even when empty. But when I do overflow: scroll, only part of the box borders appear (on the right and bottom side, but not on the top and left side). How can I fix this?
<div class="col-sm-6">
<h1>Results</h1>
<br><br>
<div style="width: 500px; overflow: scroll; height: 400px;">
<br>
<p class="my-results"></p>
</div>
</div>
You will need to add a border style property as well. The overflow: scroll has nothing to do with top and left borders.
<div style="width: 500px; overflow: scroll; height: 400px; border: solid 1px #ccc">
...
</div>
Related
Hi!
I'm using bootstrap 4 and making my own project. After some time I found a problem which I can't fix. I have placed an image into a div section and made the div to be 200px of height & width and overflow will be hidden. Then I made the height of the image 100% of the div and gave a background color(bg-light) and border(5px solid black) to the div. But the background color is seen 1px left, top and right of the div and the image is placed after the 1 px left, right and top.
HTML:
<div class="profile-image-container">
<img class="profile-image" src="image.jpg" />
</div>
CSS:
.profile-image-container{
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
}
.profile-image{
height: 100%;
}
I didn't understand your question properly.. please tell us what you want as a output.
Find the code below, whatever I understand so far
<img class="profile-image" src="img.jpg" width=100% />
Below is the code from the original question, with a placeholder image.
Unlike the image posted to the question, there is no white border between the enclosing div and the image.
The may be some additional CSS that was not included in the question to account for the white border between the div and the image.
.profile-image-container{
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
}
.profile-image{
height: 100%;
}
<body style="background-color:#e0e0e0; padding:0.5rem">
<div class="profile-image-container">
<img class="profile-image" src="https://via.placeholder.com/210x200" />
</div>
</body>
I've been trying to attach a scroll bar when my div with class "mytable" overflows.
It seemed to work out when I recreated a chunk of this html in a new file with fresh css but there's so much stuff to move that I'd rather figure out whats wrong with this one.
Below is the html structure I have and this is how it looks like on my browser
<body>
<div class="wrapper">
<!-- The Modal -->
<div class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<div class="mytable">
<div class="row header">
<div class="cell small">
Kennel
</div>
<div class="cell small">
Type
</div>
<div class="cell medium">
Name
</div>...and bunch more rows
giving overflow hidden property to the html and the body removes the regular scroll bar but I cant manage to attach a scroll bar to my main div which acts as a table with the class name "mytable"
Tried using fixed size on height or width as advised on similar posts but none of them seemed to work.
html, body {
height: 100%;
overflow: hidden;
}
.wrapper {
margin: 0 auto;
padding: 40px;
max-width: 800px;
}
.mytable {
height: 100%;
overflow: auto;
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
table-layout: fixed;
}
Change your display property of .mytable from table to 'block' or whatever (except 'table' and 'inline' elements). It will start showing scrollbar
Try using
overflow: scroll;
in the div you want to have scroll bar.
As you can see ".template-1" with fixed height and ".card-container" have overflow hidden
the issue is when we type some text in .text field its height increases towards top, and all elements from top gets hidden.
If I removed content editable true or pre-inserted text is there..it works fine.
What I want is- Content/text should hide while typing beyond (bottom) of card-container - instead of hiding upper elements ie. image and .title
Here is code snippet
<div class="template-1">
<div class="card-container">
<div class="card-content">
<div contenteditable="true" class="title editable-field">title title title</div>
<div class="visual">
<img src="http://placehold.it/155X55">
</div>
<div class="text editable-field">
Text text
</div>
</div>
</div>
</div>
.template-1{
height: 200px;
}
.card-container, .card-container{
height: 100%
}
.card-container{
overflow: hidden;
border: 1px solid green;
}
.editable-field{
border: 1px solid red;
}
and Jsfiddle for same
https://jsfiddle.net/qkmLsy4h/
EDIT: .editable-field will have height: auto; always
I am creating a two-column layout by having one div floating left (with a width of almost 50%) and another div floating right. Inside these divs I am displaying a textarea. This works fine in principle and nicely adjusts the width of the columns to the available width.
However, when someone uses the browser's textarea resizing function (e.g. in Firefox) to change the size of the textarea, the div does not adjust. The result of this is that the text area is resized, but extends outside the div (or just becomes cut off).
Can I fix this somehow?
MWE:
<div style="overflow: hidden;">
<div style="float: left; width: 40%; background: red; padding: 1em;">
<textarea style="width: 100%">left</textarea>
</div>
<div style="float: right; width: 40%; background: green; padding: 1em;">
<textarea style="width: 100%">right</textarea>
</div>
</div>
You can disable the horizontal resizing of text area
textarea {
resize: vertical; /* you can resize vertically, but not horizontal */
}
You can only permit the vertical resizing to avoid your problem.
CSS
textarea { resize:vertical; }
DEMO HERE
If you want to disble the resizing do this:
CSS
textarea { resize:none; }
If you want to have the resizing and expand the div you should use min-heightinstead width:
HTML
<div style="overflow: hidden;">
<div style="float: left; min-width: 40%; background: red; padding: 1em;">
<textarea style="width: 100%">left</textarea>
</div>
<div style="float: right; min-width: 40%; background: green; padding: 1em;">
<textarea style="width: 100%">right</textarea>
</div>
</div>
DEMO HERE
I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.
<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>Ford Thunderbird Gallery</center>
<a href="index.php?option=com_content&id=127&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >
</a>
</div>
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>2012 Ford Expedition Gallery</center>
<a href="index.php?option=com_content&id=128&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >
</a>
</div>
</div>
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>
Try working with display:table(-row)(-cell) instead of floating:
http://jsfiddle.net/DxZbV/1/
Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...