Imagine I have a div set with a maximum height of 350px.
If the content exceeds this height, the div will overflow and display a scroll bar.
But how can I make sure that a border is visible when there is no scroll bar present?
Appreciate any help. Thanks!
It seems that achieving this with just CSS is not possible.
However, you can utilize the scrollHeight property to achieve a similar result.
var mydiv = document.querySelectorAll('.test');
for (var i = 0; i <= mydiv.length -1 ; i++) {
var scrollHeight = mydiv[i].scrollHeight;
if (scrollHeight < 350)
{
mydiv[i].classList.add('border');
}
}.test{
max-height: 350px;
overflow: auto;
}
.border{
border: 1px solid black;
}<div class="test">
I'm Bordered because I have no overflow <br>
...
</div>A simple method to achieve this effect is by utilizing jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ($('#yourDiv').height() < 350) {
$('#yourDiv').css("border-color", "red");
$('#yourDiv').css("border-style", "solid");
}
});
</script>
<div id="yourDiv" style="height:349px;">
<p>Your div will display a red border due to its height being under 350px.</p>
</div>
Implementing media queries in CSS:
#ResponsiveDiv {
overflow: scroll;
}
@media only screen and (max-width: 350px) {
#TestDiv{
overflow: hidden;
}
}
A jQuery (1.11.1) script has been implemented on a business catalyst site cart page to show or hide a message based on the dropdown option selected by the user. The script functions correctly multiple times in jsfiddle at http://jsfiddle.net/NathanHill/462 ...
Is there a way to create text with a striped color using CSS? I'm thinking about something similar to applying background-image or background-color to text. Or do I need to use a specific font that has colored stripes? ...
During the development of a module using styled-components, I encountered an issue with @supports (clip-path: circle()) const Element = styled.div` overflow: hidden; border-radius: 50%; clip-path: circle(); @supports (clip-path: circle()) { o ...
I am currently facing an issue with centering images within multiple nested div elements. Each parent div contains two child divs, each of which is 300 pixels wide. I need to display images in the center of each of these child divs, regardless of their siz ...
Typically, when a webpage loads and Javascript is disabled in the browser, we use the <noscript> tag to display a warning prompting the user to enable Javascript. Contrary to this standard practice, Facebook notifies users of disabled Javascript even ...
Hey, I'm trying to figure out how to create something similar to the image shown in this picture: example I attempted using Bootstrap grid but I keep ending up with a border around the edges. Any suggestions? ...
I need help designing my table so that the intersections do not have crossed borders. Here is the CSS code I am using for my table: table { border-collapse: collapse; } table td, table th { border: 1px solid black; } table tr:first-child th { ...
Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...
Is there a way to create this star shape using SVG? I have tried using points but it's not working for me. I cannot use the path element. Any suggestions would be greatly appreciated. Thank you. <!DOCTYPE html> <html> <body> ...
The spacing between the length and width of the figure needs to be adjusted properly. However, I am facing some challenges in achieving a smooth result. I am looking for equal distance between "tr" and "th" elements, similar to this example: https://i.ss ...
I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...
This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...
I'm using JavaScript to create DOM elements dynamically. In order to animate a slide down effect, I need to retrieve the height of a specific div element. However, both clientHeight and offsetHeight are returning 0. I have confirmed that the div eleme ...
Could someone explain the process of assigning a CSS class to the choices values? I am looking to customize the background of each choice with a small image. How can this be done using wtforms and CSS? class RegisterForm(Form): username = TextField( ...
Currently, I am in the process of mastering React and developing a small online electronic store. Within my project, there is a tab labeled "View Store". My goal is for a small, hidden column to appear when a user clicks on this tab, revealing text or imag ...
Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a ...
I am trying to place this line at the top of the page above the navigation links (as shown in the screenshot). In the screenshot it is the line above the Home link. I want the height of the ".navbar-links-" to be 100%. Here is the code for this element: ...
I have a jQuery script set up on this particular webpage just before the ending body tag. Here is the script: <script> $(document).ready(function(){ var demomain = $(".demo-bg section"); var demomainW = demomain.height()+ 150 ...
Is it possible to assign custom CSS properties to a class that has been assigned to a widget using the css_classes parameter when serving the app with bokeh serve --show? from bokeh.models import Button button = Button(label="Press Me", css_classes=[&apos ...
progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...