I have created a dynamic HTML label. When is rendered by orbeon runner first it shows correctly but when I add a new item in a repeated grid inside it gets duplicated
The HTML label is like this:
<div class="form-table--head">
<div class="content-left">
<p class="property--title"></p><span class="property--qty">{$itCount} counted</span>
<div class="box-info box-link-popup hidden-xs">
<div class="box__popup" tabindex="-1">
<p>Options:</p>
<ul>
<li>Option 1.</li>
<li>Option 2.</li>
<li>Option 3.</li>
</ul>
</div>
</div>
<p class="property--amount property--amount-xs">{$itSum} €</p>
</div>
<div class="content-right">
<p class="property--amount hidden-xs">{$itSum} €</p>
<div class="header-menu">
<ul>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
</div>
</div>
Here is the entire form source code: https://pastebin.com/P3VK4hKm
Here is the behaviour first time:
And here after add a new iteration:
I am using Orbeon 2018.2.3 PE
The behavior you noticed is caused by a bug, which is fixed in Orbeon Forms in 2019.1. For reference, the issue is tracked as #4136.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
This code works perfectly in desktop on windows. but when i test it in safari ios the third col always collapse and jump to a new line.
here is the code:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-sm-4">
Second in sm+, last in mobile
</div>
<div class="col-4 order-3">
Last in sm+, Second in mobile
</div>
</div>
</div>
Anybody else experienced it? is it a bug?
Thanks
I think you wrote the order classes wrong. Bootstrap is mobile first so col-sm for example is sm and up (to lg).
This is probably what you want:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-3 order-sm-1">
Second in sm+, last in mobile
</div>
<div class="col-4 order-2">
Last in sm+, Second in mobile
</div>
</div>
</div>
Tell me if there's any issue with this code!
I am in the process of converting my website from aspx to cshtml (Razor). This is going fine apart from an issue I have with my 2 or 3 column master pages and trying to convert these to a cshtml Layout Page.
In Razor I have basically created separate pages for all of my sections and am then calling these from the Layout Page using #RenderPage. Maybe this in itself is wrong? Basically what all the sections are displaying fine apart from the Main content section which is basically a wrapper for the 3 (or 2) columns that I wish to be displayed within this. I have tried various ways to do this but either just get the 1 main column displayed across the width of the page or get the column displayed above each other but the formatting of the other 2 is incorrect. I know all of the CSS etc works fine in aspx but I am obviously doing something wrong in Razor.
CSHTML New Layout Page
<body>
<div id="container">
<div id="top">
#RenderPage("~/Views/Shared/_Top.cshtml")
</div>
<div id="header">
#RenderPage("~/Views/Shared/_Header.cshtml")
</div>
<div id="nav">
#RenderPage("~/Views/Shared/_Nav.cshtml")
</div>
<div class="main">
#RenderPage("~/Views/Shared/_Main.cshtml")
<div class="columnVerySmall">
#RenderPage("~/Views/Shared/_ColumnVerySmall.cshtml", false)
</div>
<div id="columnLarge">
#RenderBody()
</div>
<div id="columnSmall">
#RenderPage("~/Views/Shared/_ColumnSmall.cshtml", false)
</div>
</div>
<div id="footer">
#RenderPage("~/Views/Shared/_Footer.cshtml")
</div>
<div id="scripts">
#RenderPage("~/Views/Shared/_Scripts.cshtml")
</div>
</div>
</body>
Old ASPX Master Page:
<div class="main">
<main role ="main" class="mainWrapper">
<div class="columnVerySmall">
<asp:ContentPlaceHolder ID="columnVerySmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnLarge">
<asp:ContentPlaceHolder ID="columnLargeContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnSmall">
<asp:ContentPlaceHolder ID="columnSmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
</main>
</div>
I have managed to solve this by changing the Main section as shown in the code block below. I basically added the "Main" code to my layout and then #Render for the Columns. I don't really see how I can do this by having a separate page for "Main" and then calling it from the Layout Page using #RenderPage as I was originally trying. This is what I changed:
<div class="main">
<main role="main" class="mainWrapper">
<div class="columnVerySmall">
#RenderPage("_ColumnVerySmall.cshtml")
</div>
<div class="columnLarge">
#RenderBody()
</div>
<div class="columnSmall">
#RenderPage("_ColumnSmall.cshtml")
</div>
</main>
</div>
I need to Bind Array Items to UI.
back in Days i used bootstrap and now looking to use Angular Material.
In bootstrap and angular Binding the code as follows
<div class="row">
<div ng-repeat="product in products">
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
how to do the simalar grid binding using Angular Material. I tried below
<div layout="column">
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Resulting all items in rows. But i need the display to be similar to bootstrap view, showing items next to each other and in next rows
You will have to add "layout-wrap" attribute to your row.
<div layout="row" layout-wrap>
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Read more about layout options here
Ok so hoping this is final question on Bootstrap Scrollspy, almost there, one more problem to fix i hope. As I have read having a body of 100% seems to disagree with scrollspy ( Im using sticky footer). The final element in my nav is highlighted no matter where i am on the page.
I have tried removing 100% body
I have tried removing the scrollspy js
I have tried setting the body as the target element
I have tried $('body').scrollspy();
None of these work. If i set the height though on the element I am spying on then it does work, though it seems to scroll past the target element quite a bit and then change. I would like to still be able to keep sticky footer.
Here is my code
View
<div class="container">
<div class="row show-grid clear-both">
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h2>
<ul class="nav date">
<% #response.each_pair do |date, movie| %>
<li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
<% end %>
</ul>
</div>
</div>
</div>
<div class="span9">
<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
<% #response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
<% movie.each do |m| %>
<div class="thumbnail clearfix">
<!--Image here
<% end %>>
<div class="caption pull-right">
<!--Content Here
</div>
</div>
<% end %>
<% end %>
</div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->
JS
$('#dateNav').scrollspy();
CSS
#dateNav{
position: fixed;
}
#spyOnThis {
height:100%;
overflow:auto;
}
.side-nav .active a {
color: #FFBE00;
}
HTML Output (Nav)
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h3>
<ul class="nav date">
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
</li>
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
</li>
<li class="active"><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
</li>
</ul>
</div>
</div>
</div>
Element being spied on
<div class="span9">
<div id="spyOnThis" data-target="#dateNav" data-spy="scroll">
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
<h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!-Paragraphs here
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on next date</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
</div>
</div>
Apologies for the amount of code but better to have more on there i guess
So does anyone know of a solution for this as scrollspy does seem quite buggy at the moment
Thanks
You simply can't set 100% height on the element you're spying on with ScrollSpy, whether it be body or another div.
However, there is an issue on GitHub that suggests a workaround for this (also discussed here).
In your case, this would be:
$(window).scrollspy({wrap: $('#spyOnThis')[0]});
Here's a jsFiddle of your code that works with that fix. Note that I changed some of your HTML:
I removed the data-target and data-spy attributes again. When initiating ScrollSpy, use either the data attributes or the JavaScript.
I gave your span9 div the #spyOnThis ID, since the extra markup was unnecessary.
Hopefully this will resolve it once and for all.
EDIT
This solution worked; for #Richlewis' specific scenario we needed to add the parameter offset: -250 to ScrollSpy.
I just got scrollspy working on a site that I'm building. I was having the same issue where the last element was always highlighted. My problem was that I was calling .scrollspy() on the nav element when it should be on the body.
Try changing your script call to:
$('body').scrollspy();
In case the other answers don't work for you, my problem ended up being a missing doctype on the top of the page.
Scrollspy calls $(window).height() in the formula to calculate the current scroll position. From this other question, you can see that this call will not work without a correct doctype.
As soon as I added <!DOCTYPE html> to the top of my HTML, Scrollspy started highlighting the correct links.