This is some easy code to explain what I need:
<ul>
<%
for(int i = 0; i < 6; i++){
%>
<li>test<%=i%></li>
<%
}
%>
</ul>
Now, standard the li's will be displayed like this
test0
test1
test2
test3
test4
test5
I want them to be displayed like this
test0 test2 test4
test1 test3 test5
It's probably possible with css but I don't know how.
You probably want to let the first first three lis float to the left, and then, for the fourth one, use "clear : both" so that the line breaks, and then do the same thing for the last one...
<ul>
<li style="float : left">A</li>
<li style="float : left">B</li>
<li style="float : left">C</li>
<li style="clear : both ; float : left">D</li>
<li style="float : left">E</li>
<li style="float : left">F</li>
<li style="float : left">G</li>
</ul>
You have the index of the li in the loop, so using "i % 4 == 0" should do the trick..
Related
The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>
i have this html structure:
<div class="wrapper-a">
<li class="list"><h3>Text1</h3></li>
<li class="list"><h3>Text2</h3></li>
<li class="list"><h3>Text3</h3></li>
</div>
<div class="wrapper-b">
<li class="list"><h3>Text4</h3></li>
<li class="list"><h3>Text5</h3></li>
<li class="list"><h3>Text6</h3></li>
</div>
I need to get alls Text´s from list´s with ".wrapper-a" parent:
Elements links = doc.select("div[class=wrapper-a] > li[class=list]");
for (Element link : links)
{
Elements lists_s = link.select("h3");
String list_s = lists_s.text();
System.out.println(list_s);
}
What i expected to see:
Text1
Text2
Text3
No error occurring, but also no output printed.
Anybody could help me with this?
Greetings!
Try this selector:
Elements links = doc.select("div.wrapper-a li");
It should work.
Bytheway I think you are using an old version of JSoup, with a modern version (>= 1.7.1) your code works fine as it is.
I'm trying to create a custom renderer for the simple_navigation rails gem. So far, after reading through the tweaks made for the bootstrap version of the gem, I have been able to make some minor icon changes to my navigation but I'm completely stuck otherwise.
I'm trying to add some set my renderer up to accommodate the markup found at this JSfiddle:
http://jsfiddle.net/v5Yhc/
<ul class="nav navbar-collapse collapse navbar-collapse-primary">
<li class="active">
<span class="glow"></span>
<a href="dashboard.html">
<i class="icon-dashboard icon-2x"></i>
<span>Dashboard</span>
</a>
</li>
<li class="dark-nav ">
<span class="glow"></span>
<a class="accordion-toggle collapsed " data-toggle="collapse" href="#yJ6h3Npe7C">
<i class="icon-beaker icon-2x"></i>
<span>
UI Lab
<i class="icon-caret-down"></i>
</span>
</a>
<ul id="yJ6h3Npe7C" class="collapse ">
<li class="">
<a href="../ui_lab/buttons.html">
<i class="icon-hand-up"></i> Buttons
</a>
</li>
<li class="">
<a href="../ui_lab/general.html">
<i class="icon-beaker"></i> General elements
</a>
</li>
<li class="">
<a href="../ui_lab/icons.html">
<i class="icon-info-sign"></i> Icons
</a>
</li>
<li class="">
<a href="../ui_lab/grid.html">
<i class="icon-th-large"></i> Grid
</a>
</li>
<li class="">
<a href="../ui_lab/tables.html">
<i class="icon-table"></i> Tables
</a>
</li>
<li class="">
<a href="../ui_lab/widgets.html">
<i class="icon-plus-sign-alt"></i> Widgets
</a>
</li>
</ul>
</li>
<li class="">
<span class="glow"></span>
<a href="../forms/forms.html">
<i class="icon-edit icon-2x"></i>
<span>Forms</span>
</a>
</li>
<li class="">
<span class="glow"></span>
<a href="../charts/charts.html">
<i class="icon-bar-chart icon-2x"></i>
<span>Charts</span>
</a>
</li>
<li class="dark-nav ">
<span class="glow"></span>
<a class="accordion-toggle" data-toggle="collapse" href="#WLGsdJPav9">
<i class="icon-link icon-2x"></i>
<span>
Others
<i class="icon-caret-down"></i>
</span>
</a>
<ul id="WLGsdJPav9" class="in" style="height: auto;">
<li class="">
<a href="../other/wizard.html">
<i class="icon-magic"></i> Wizard
</a>
</li>
<li class="">
<a href="../other/login.html">
<i class="icon-user"></i> Login Page
</a>
</li>
<li class="">
<a href="../other/sign_up.html">
<i class="icon-user"></i> Sign Up Page
</a>
</li>
</ul>
</li>
</ul>
I can't figure out how to lay out the ruby/rails code so that it mirrors the behavior of the markup in the fiddle?
The kicker here is that the children UL/LI elements must be presented on page load, but the simple navigation GEM hides them until their parent UL/LI element is active.... frustratingly.... without fail.
Here is my custom renderer code:
class Admin < SimpleNavigation::Renderer::Base
def render(item_container)
config_selected_class = SimpleNavigation.config.selected_class
SimpleNavigation.config.selected_class = 'active'
list_content = item_container.items.inject([]) do |list, item|
li_options = item.html_options.reject {|k, v| k == :link}
icon = li_options.delete(:icon)
split = (include_sub_navigation?(item) and li_options.delete(:split))
li_content = content_tag(:span, '', class: 'glow')
li_content << tag_for(item, item.name, icon, split)
if include_sub_navigation?(item)
if split
lio = li_options.dup
lio[:class] = [li_options[:class], 'dropdown-split-left'].flatten.compact.join(' ')
list << content_tag(:li, li_content, lio)
item.html_options[:link] = nil
li_options[:id] = nil
li_content = tag_for(item)
end
item.sub_navigation.dom_class = [item.sub_navigation.dom_class, 'dropdown-menu', split ? 'pull-right' : nil].flatten.compact.join(' ')
li_content << render_sub_navigation_for(item)
li_options[:class] = [li_options[:class], 'dropdown', split ? 'dropdown-split-right' : nil].flatten.compact.join(' ')
end
list << content_tag(:li, li_content, li_options)
end.join
SimpleNavigation.config.selected_class = config_selected_class
if skip_if_empty? && item_container.empty?
''
else
content_tag(:ul, list_content, {:id => item_container.dom_id, :class => item_container.dom_class})
end
end
protected
def tag_for(item, name = '', icon = nil, split = false)
unless item.url or include_sub_navigation?(item)
return item.name
end
url = item.url
link = Array.new
link << content_tag(:i, '', :class => [icon].flatten.compact.join(' ') + ' icon-2x') unless icon.nil?
link << name
if include_sub_navigation?(item)
item_options = item.html_options
item_options[:link] = Hash.new if item_options[:link].nil?
item_options[:link][:class] = Array.new if item_options[:link][:class].nil?
unless split
#item_options[:link][:class] << 'dropdown-toggle'
item_options[:link][:class] << 'in'
#item_options[:link][:'data-toggle'] = 'dropdown'
item_options[:link][:'data-toggle'] = 'collapse'
item_options[:link][:'data-target'] = '#'
#link << content_tag(:b, '', :class => 'caret')
link << content_tag(:b, '', :class => 'icon-caret-down')
end
item.html_options = item_options
end
link_to(link.join(" ").html_safe, url, options_for(item))
end
end
Is anyone a simple_navigation whiz?
Thanks!
Regarding your two specific questions:
I can't figure out how to lay out the ruby/rails code so that it mirrors the behavior of the markup in the fiddle?
The target html structure seems pretty complicated to me. Is there any way to simplify this? In addition, it probably would be easier to help if you would fork the simple-navigation bootstrap renderer so it would be more obvious what you have changed.
The kicker here is that the children UL/LI elements must be presented on page load, but the simple navigation GEM hides them until their parent UL/LI element is active.... frustratingly.... without fail.
simple-navigation is - by default - configured that it only renders all primary items and the subnavigation of the active primary item, so this is a feature, not a bug :-). If you need to render the complete navigation independently of the active item, you need to pass the :expand_all => true option to the render_navigation call, which in turn is used to determine the return value of SimpleNavigation::Rendering::Renderer::Base#include_sub_navigation?.
I have tried to group a set of radio buttons inside loop by providing additional html attribute in html help as below -
<ol class="Opt">
#foreach (var opt in quest.Options)
{
<li class="Opt">
#Html.RadioButtonFor(o => opt.Title, opt.Title, new { #name = "uniqueRadio"})
#Html.Label(opt.Title)
</li>
}
</ol>
However name attribute ot generated input html tag gets over-written by opt.Title for obvious reasons. MVC-4 uses name attribute for strongly typed model-binding when posting data.
How do I make radio button grouped together ?
EDIT: I replaced RadioButtonFor with RadioButton, as suggested below. But this way I miss-out model binding feature.
<ol class="Question">
#for (int j = 0; j < Model.Options.Count; j++)
{
<li class="Opt">
#Html.RadioButton("uniqueRadio", Model.Options[j].IsSelected, false)
#Model.Options[j].Title
</li>
}
</ol>
Use simple RadioButton
<ol class="Opt">
#foreach (var opt in quest.Options)
{
<li class="Opt">
#Html.RadioButton("uniqueRadio", opt.Title)
#Html.Label(opt.Title)
</li>
}
</ol
I need to create Menu for the master page. I've faced with following problem
<ul class="main_menu">
#foreach (var node in Model.Nodes)
{
int i = 1;
<li class="**HOW TO ADD HERE A CLASS like level+i.ToString()?????**">#Html.DisplayFor(m => node) |
#if (node.Children.Any()) {
<ul class="menuchild" style="display: none;">
<li>
#Html.DisplayFor(m => node.Children)
</li>
</ul>
}
</li>
}
</ul>
I need to create levels for the menu for Javascript , say level1 , level2 , level3 , how to combine strings inside Razor.
Thanks.
Enclose with #()
<li class="#("level" + i.ToString() )">
or
<li class="#string.Format("level{0}", i)">