I am trying to build a drop-down menu in a navbar. I have done this, but the list of items is too long to fit on the page (the bottom of the list is hidden) so I therefore need to make the list scrollable. As of now, when the menu is "open" and I scroll, it scrolls the page behind the menu rather than the menu. Please help me figure this out! Below I have posted a bit of my HTML and CSS as it pertains to this drop down menu.
<li class="nav-item dropdown">
INSTRUMENTS
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for instrument in instruments %}
{{ instrument.name }}
{% endfor %}
</div>
</li>
.scrollable-menu {
height: auto;
max-height: 500px;
overflow-x: hidden;
}
Have you tried using overflow-y: auto or overflow-y: scroll yet? Don't have the time to work on an example at the moment, but that should point you in the right direction.
You can find a similar post here for more info.
I think you are missing the correct selector.dropdown-menu is the correct selector if not solved then try overflow:auto;
if not solved then try this example
Related
Actually I am creating a Basic E-Commerce Flask Application.
Data of the price, discount and everything is provided from content.json file to the function in python from where it goes to home.html file such that each product's data is represented in specific boxes.
It currently looks like this..
I just added random data here for reference...
Here I want all the boxes to be placed in a grid of 2 or 3 columns depending upon the width of the screen.
I have placed all the boxes generated from the jinja for loop in the boxes class.
<div class="boxes">
{% for item in data %}
<div class="card bg-dark text-white" style="width: 23rem;">
<div class="card-body">
<h5 class="card-title">{{item}}</h5>
<h6 class="card-subtitle mb-2 text-muted">Category: {{item.split(" ")[len(item.split(" "))-1]}}s</h6>
<p class="card-text" id="cut">Actual Price: {{data[item].price}} Rupees</p>
<p class="card-text">New Price: {{round(((100-data[item].discount)/100)*data[item].price)}} Rupees</p>
<p class="card-text">Discount: {{data[item].discount}}%</p>
<p class="card-text">Ratings: {{ data[item].rating }}⭐</p>
Buy Now
Product Details
</div>
</div>
</div>
but, when I applied grid properties and styles in 'boxes' class it seems to work only on the first box like the margin etc, and not in the other boxes.
Like this:
see here it's only applied to first box
I think it's because of the dynamic data generated due to jinja for loop that's causing this issue, and I don't know how to solve this.
the style for 'boxes' class:
.boxes {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
}
So yeah the main problem is how to apply this grid to all the boxes present in the boxes class
I want to click a three way toggle using selenium with python.The html element Ids are dynamic. So I have tried with an XPath where class contains a specific text! But I seeing 'element not found'/'element not visible' whole day!
I've tried with below line of code but no help.
browser.find_element_by_xpath("//*[contains(#class,'switch switch-three toggle ios') and contains(text(),'Available')]").click()
Here is the HTML code of the page and I want to click on - 'Available'
<label class="switch switch-three toggle ios" id="radio8526" onclick="" style="float: left; width: 300px; height:15px; margin-right: 20px;margin-left: 20px;">
<input id="available8526" value="available" onclick="setVersioningIdFun('8526');document.getElementById('toggleStateButton').click();;" name="onoffswitch8526" type="radio">
<label for="available8526" onclick="">Available</label>
<input id="unavailable8526" value="unavailable" onclick="setVersioningIdFun('8526');document.getElementById('toggleStateButton').click();;" name="onoffswitch8526" type="radio">
<label for="unavailable8526" onclick="">Unavailable</label>
<input id="archived8526" value="archived" onclick="setVersioningIdFun('8526');document.getElementById('toggleStateButton').click();;" name="onoffswitch8526" type="radio" checked="">
<label for="archived8526" onclick="">Finalised</label>
<a class="slide-button"></a>
</label>
From w3c documentation You can use this to solve your problem
browser.find_element_by_css_selector('input[id^="available"]').click()
You can just use the value attribute, e.g.
input[value='available']
You might need to add a wait for clickable to make sure the page has loaded. See this link for more info and some examples.
I'm trying to cycle through a list of variables on my application's front-end. The only caveat is I want the variables to cycle through a list showing one variable at a time. How can I achieve this? Is there some functionality in Jinja2 that allows you to do this?
<div class="vert-al" align="center">
{% for x in [1,2,3,4,5] %}
<span class="badge badge-danger">{{x}} alligators in the pool!</span>
{% end for %}
</div>
As is, the snippet will render a line for each of the elements in the list. Instead, I would like to cycle through them in place.
The CSS for vert-al looks like this:
.vert-al{
vertical-align:middle;
margin-bottom: 1rem;
margin-top: 1rem;
}
Javascript that fades the variable in and out:
setInterval(function(){
$(".badge-danger").fadeOut(2100);
$(".badge-danger").fadeIn(900);
}, 3000);
I'm not sure whether to tackle this problem with python/jinja or more of a js/css route so any guidance would be super helpful!
Jinja is going to render your variables only once, when the page loads. If you want to cycle through them, you'll have to make sure that they're all there. Then you can show/hide them with JS.
Maybe something like this:
<div class="vert-al" align="center">
{% for x in [1,2,3,4,5] %}
<span class="badge badge-danger" id="gator-{{x}}" style="display:none">{{x}} alligators in the pool!</span>
{% end for %}
</div>
Then:
for (var i = 0; i < num_gators; i++) {
document.getElementById("gator-" + i).fadeIn(900);
}
Note: Not sure about that Javascript, but you get the idea.
I'm working on Bootstrap and I'm pretty new to front-end. I don't have a CSS file, all i have is a html file included in my python django project. In this file I', trying to put a background image from my section.
This image doesn't show up fully or expand to the full size. I'm not sure how to make it responsive background section with the image included and I'm not sure how to make sure this section atleast expands to full size or a size of page. Can you please help.
Whatever i try to find online shows as CSS, and i don't want to include css right now. Just want to keep it simple with boostrap html file. Here is the code below.
<section class="jumbotron text-center" style="background:transparent url({%static 'workspace.jpg'%}) no-repeat center center /cover">
<div class="container">`enter code here`
<h1 class="jumbotron-heading">Name heading</h1>
<p class="lead font-weight-bold text-muted">Test 2</p>
<p>
Email
</p>
</div>
</section>
To add a background image to a container with inline CSS you can do this:
Note*: Make sure to remove the border: 1px solid red;. This was just for demonstration.
<div class="container" style="border: 1px solid red; background-image: url('https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1'); background-size: 100% 100%; background-repeat: no-repeat;">
<p style="padding: 100px;">content</p>
</div>
you can add this code in the style tag like this <style>.jumbotron .text-center{background-size:cover; background-repeat:no-repeat; background-position:center;}</style>i would suggest you to add a specific call to your section the style will only effect the specific div only.
if you want add inline the do like this style="background-image:url(img);background-size:cover; background-repeat:no-repeat; background-position:center; "
I have a project in python that will hide a div when my icon is clicked and then collapse when it is clicked again. Right now I have the following html code
<img scr="/path/to/img"></img>
<div>
<p>Press the icon to see more stuff</p>
</div>
<div id="showOrHide" style="display: none;">
<p>one</p>
<p>two</p>
<p>three</p>
</div>
So my question is what is the best way to remove the style on the div with the id showOrHide when the user clicks on the image?
Thanks!
Python isn't best equipped to do what you're trying to accomplish - is there no way you can use Javascript? A simple onclick() http://www.w3schools.com/jsref/event_onclick.asp will get the job done in JS.