I have a complex multi-level dropdown menu and I want to load the content only when user click on the button. The content is lazy loaded.
<div class="dropleft">
<button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
Open multi-level dropdown
</button>
<div class="dropdown-menu">
<%=turbo_frame_tag "actions", src: controller_path(), loading: 'lazy' do %>
Loading...
<% end %>
</div>
</div>
controller
def actions
render layout: false
end
actions.html.erb
<%=turbo_frame_tag "actions" do %>
<li>item 1</li>
<li>item 1</li>
<% end %
now the problem is that the rendered tag mess up with the existing code and broke the boostrap dropdown.
<div class="dropleft show">
<button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
Open multi-level dropdown
</button>
<ul class="dropdown-menu show" style="position: absolute; transform: translate3d(-158px, 0px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left-start">
<turbo-frame loading="lazy" id="actions" src="http://localhost:3000/actions">
<li>Item 1</li>
<li>Item 2</li>
</turbo-frame> <!-- This tag broke the multi-level dropdown -->
</ul>
</div>
How can I say to render the template from server and then remove the turbo frame tag?
Related
I'm wondering how do I implement a star rating system in ASP .NET MVC when the stars are encapsulated in a Ul, li.
I'm using https://htmlstream.com/preview/unify-v2.5.1/e-commerce/page-single-product-2.html as a layout.
The code below is within my form post method
#using (Html.BeginForm("Index", "Drink", FormMethod.Post))
{
....
<!-- Rating -->
<div class="col-5 col-sm-4 col-md-3">
<h3 class="h6 mb-1">Rate:</h3>
<ul class="js-rating u-rating-v1 g-font-size-20 g-color-gray-light-v3 mb-0" data-hover-classes="g-color-primary">
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-line-height-1_4">
<i class="fa fa-star"></i>
</li>
</ul>
<!-- End Rating -->
</div>
....
}
I'm wondering how do I let my controller know what the selected rating is?
I have the following in my index:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<% render partial: 'booksocial', locals: {book: book} %>
</div>
Then in my partial:
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=I Like BIg Books&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://books.com/book/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
The page is rendering with the dropdown button but it's actually not rendering the dropdown options. Is there something in my code preventing the list from rendering?
Easy answer that I'm surprised no one chimed in with. I'm not actually outputting the partial at the moment.
<%= render partial: 'booksocial', locals: {book: book} %>
Here's the dropdown menu:
<div class="btn-group bootstrap-select dropup open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="taggings_tag_id" title="Nothing selected" aria-expanded="true">
<span class="filter-option pull-left">Nothing selected</span> <span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu open" style="max-height: 484px; overflow: hidden; min-height: 92px;">
<ul class="dropdown-menu inner" role="menu" style="max-height: 472px; overflow-y: auto; min-height: 80px;">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text"></span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">Create Account</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
<select class="selectpicker" id="taggings_tag_id" name="taggings[tag_id]" tabindex="-98">
<option value=""></option>
<option value="1">Create Account</option>
</select>
</div>
I'm trying to select that "Create Account" option from the dropdown. I can get capybara to click on the dropdown and expand the list, but I can't get it to select the correct option--resulting in a null value failure when it clicks on Add Tag.
it 'adds a tag' do
page.find(:xpath, "//button[#title='Nothing selected']").click
option=all("ul.dropdown-menu.inner > li").last
option.click
find('input[value="Add Tag"]').trigger("click")
expect(page).to have_content 'Create Account'
end
Because no elements is a valid return, #all doesn't wait for elements to appear on the page by default. Since your dropdown probably has an animation when it's opening, #all is looking for the element before it's had time to appear on the page. There are a couple of solutions you could use
option=all("ul.dropdown-menu.inner > li", count: 2).last
Force it to wait for 2 li elements to be visible on the page - could also use minimum, maximum, between.
option=find("ul.dropdown-menu.inner > li", text: "Create Account")
Look for the li by its content which will automatically wait for it to appear.
Note: this will only work if the li accepts the click -- you may need to adjust the selectors to select the element if that's where the click is listened for.
I am trying to make a slideshow using multiple photos that users uploaded through carrierwave.
This is my post/show.html.erb
<div id = "carousel-example-generic" class= "carousel slide" data-ride= "carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% #photo_attachments.each do |p| %>
<div class="item active">
<%=image_tag p.avatar_url.to_s%>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<% end %>
</div>
.....
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>
I cannot figure it out the way to list one photo per slide:( It is still listing all the photos that I have to scroll :(
You are applying active class to all photos that you use
div class="item active"
but it should be
div class="item"
and add this into your javascript
$( '.item:first' ).addClass( 'active');
I have the following to display a list of items and a button underneath the list. However the button is overlapping on top of the list. I must be not putting some kind of data-role or another one of their attributes on it.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
Here is what it looks like:
Live Example:
http://jsfiddle.net/B7nhA/ (the problem)
http://jsfiddle.net/B7nhA/1/ (the fix)
You're missing one of the attributes for the listview
data-inset="true"
HTML
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" data-inset="true">
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
i experienced the same problem. Here is my fix.
<style>
.ui-content .ui-listview
{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
JsFiddle Demo
You dont need to modify your markups.
How about inserting an line break befor the button.Not a clean solution I think.But it will work.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<br>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
I used padding to solve this kind of problems. See below I added padding to the list-container div.
<div data-role="content" data-theme="b">
<div style="padding-bottom:20px">
<ul id="listOfSheets" data-role="listview" >
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
Here is a DEMO