DNN 7 module moves every other module up - module

I'm running a local install of DNN in a development capacity. I have a "testimonials" module that I want to use. The problem I get is that when I drag into a pane it causes all modules above it to "shift" up to a point where they go behind a content slider I have. Tried various CSS methods to fix it but I can't seem to find the bug. Has anyone else experienced the issue before??
Also tried contacting the owner but his last activity was in 2012.
thanks
<%# Control Language="vb" AutoEventWireup="false" Codebehind="Testimonials.ascx.vb" Inherits="Ovionx.DNN.Testimonials.Testimonials" %>
<asp:Panel ID="pnlTestimonials" runat="server">
<div id="rotating_homepage_text">
<asp:Repeater ID="rptTestimonials" runat="server">
<ItemTemplate>
<div>
<%# FormatTestimonial(Container.DataItem) %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Panel>
<script type="text/javascript">
// <![CDATA[
var currentTallest = 0;
var offsetPadding = 0;
$("#rotating_homepage_text")
<% If ShowPager Then %>
.before('<div id="rotating_homepage_text_nav">')
<% End If %>
.cycle({
fx: 'turnUp',
speed: <%= TransitionSpeed.ToString %>,
speedIn: 100,
speedOut: 100,
pager: '#rotating_homepage_text_nav'
})
.children().each(function(){
if ($(this).height() > currentTallest) {
currentTallest = $(this).height();
}
});
offsetPadding = $("#rotating_homepage_text").offset().top - $("#<%=pnlTestimonials.ClientID%>").offset().top;
$("#<%=pnlTestimonials.ClientID%>").css('height', (currentTallest + offsetPadding + 30) + 'px');
// ]]>
</script>

One thing you might try is switching to the LAYOUT mode on the page and see if that allows you to position the modules on the page.
Layout mode "hides" the content itself, so you can work with the module/containers to move things around, where in Edit/View mode that can sometimes be more difficult to do.
You might ultimately need to modify the Content Slider module if it is positioning things wrong in HTML, that or customize your SKIN so that the slider is in a different Pane than all other modules.

Related

Why aren't runAs=Server controls on this page accessible from VB?

Okay, this one is just perplexing and annoying …. I’m hoping someone out there can help.
I have several aspx pages with server-side controls manipulated in the Visual Basic backing code; the vast majority work as advertised without any problems at all. Then there's this guy:
In the aspx page:
<%# Page Title="COVID-19 Staff Information" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="COVID-19.aspx.vb" Inherits="COVID_19_COVID_19" %>
…
<asp:Content ID="COVID_Main" ContentPlaceHolderID="MainContent" Runat="Server">
<div id="updateMeFromVB" runat="server"></div>
…
In the Visual Basic:
Partial Class COVID_19_COVID_19
…
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
…
updateMeFromVB.InnerHtml = html
End Sub
On compilation, I get:
… COVID-19.aspx.vb(28,0): error BC30451: 'updateMeFromVB' is not declared. It may be inaccessible due to its protection level.
HOWEVER, if I comment out that one line from Page_Load, it compiles great, put a breakpoint in the Page_Load subroutine, and when the breakpoint is hit do a “Quick Watch” on “updateMeFromVB” and there it is, all instantiated and happy.
I’ve been round and round this mulberry bush. If I uncomment the updateMeFromVB.InnerHtml = html line, I get a compilation error – comment it out, and I can see the variable in the debugger.
Any clues?????
I’ve got other pages in the same solution where this is working just fine … over on one of those:
ASPX:
<%# Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="CareLinkIndex.aspx.vb" Inherits="CareLink_Index" %>
…
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<!--#include file="GeneratedLinkList.htmlTxt" -->
<div id="AdminOnlyDiv" runat="server" style="text-align: left">
…
VB:
Public Sub Page_Load(sender As Object, e As EventArgs)
AdminOnlyDiv.Visible = IsMaintainer()
End Sub
Works great.
Okay, so the answer makes less sense than the question. But I found a similar issue (#6217414) and the answer there was to rename the page.
Can't hurt, right?
So COVID-19.aspx is now CovidEmpPage.aspx ... and everything works like it should.
That absolutely should not have worked, and is definitely indicative of a bug in Visual Studio.

How can I submit a form on input change with Turbo Streams?

I have a form I want to submit automatically whenever any input field is changed. I am using Turbo Streams, and if I use onchange: "this.form.submit()" it isn't captured by Turbo Streams and Rails uses a standard HTML response. It works fine when clicking the submit button. How can I work around this?
There is a discussion on the hotwire forum, where Mark Godwin figured out why form.submit() isn't working with turbo:
Turbo intercepts form submission events, but weirdly, the JS formElement.submit() method does not trigger the submit event.
And Jacob Daddario figures out that you can use form.requestSubmit() instead:
It turns out that the turbo-stream mechanism listens for form submission events, and for some reason the submit() function does not emit a form submission event. That means that it’ll bring back a normal HTML response. That said, it looks like there’s another method, requestSubmit() which does issue a submit event.
So you can change your code slightly, and use requestSubmit() if a browser supports it, and use submit() if not:
onchange: "this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()"
Update:
As BenKoshy pointed out, in Turbo 7.1.0, a polyfill was added so you can use form.requestSubmit() without checking for browser support, so you can add this to your input field:
onchange: "this.form.requestSubmit()"
I need to implement this for an app with lots of forms. I wound up using Stimulus. Below is the whole controller:
import { Controller } from "stimulus"
const _ = require("lodash")
export default class extends Controller {
connect() {
let that = this;
that.element.addEventListener('change', _.debounce(that.handleChange, 500))
}
handleChange(event) {
event.preventDefault()
// event.target.name // => "user[answer]"
// event.target.value // => <user input string>
event.target.form.requestSubmit()
}
}
and here it's used in a form with a single text input. NOTE the controller is attached to the form, not to the inputs.
<%= turbo_frame_tag dom_id(form_model) do %>
<%= form_with model: form_model,
format: :turbo_stream,
html: { data: { controller: "buttonless-form" } } do |f| %>
<%= f.hidden_field :question_id, value: question.id %>
<%= f.text_field :answer_value, class: "input shadow wide", placeholder: "Enter your answer here" %>
<% end %>
<div id=<%= "question_#{question.id}_output" %>>
<p> <!-- feedback to the user shows up here via Turbo -->
</div>
<% end %> <!-- end turbo frame -->

Re-using a stimulus action elsewhere on the page?

I am wiring up a slack clone (html/css) and have it so that the reference drawer opens/closes when I click on the x. I am wanting to also open/close it from the navigation area and thought I could just take the same link_to and call it from a different part of the page.
But when I do that, if I'm calling it from within a different target, I get an error
Error invoking action "click->navigation#toggle_reference_drawer"
Error: Missing target element "navigation.referenceDrawer"
How can I use code inside a data-target to trigger a different data-target?
i.e. what I'm trying to get working is
--navigation partial (link_to doesn't work) --
<div data-navigation-target="storyNavLinks">
<div class ="story">
<%= link_to "[x]", "#", data: { action: "click->navigation#hide_reference_drawer" } %>
</div>
</div>
-- application partial (link_to works) --
<div data-navigation-target="referenceDrawer">
<div class='reference box'>
<%= link_to "[x]", "#", data: { action: "click->navigation#hide_reference_drawer" } %>
</div>
</div>
Not sure where I'm going wrong.. I figured as long as the target being referenced is unique and on the page it shouldn't matter where it's being called from?
You have to make sure your data-controller attribute is on an element that wraps both targets. If that is not possible you can always include the controller twice but the targets will only be scoped to each instance so you will need to add them twice as well.

Jquery-ui datepicker with months and years menu rails

I have a rails app where I want to choose a date of birth. I'd like to use the jquery-ui datepicker for this but am not sure how to implement it into my rails app.
This is a screenshot of the options I want with the month and years menus to make selecting birthdates easier.
http://cl.ly/image/46152b372N1b
I'm really not sure where to start as far as setting this up in my application.js file as well as in my view.
Right now my view/form looks like this
<%= f.text_field :patient_dob, :id => 'datepicker' %>
Here's my application.js
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
Again, I'd like that to be a a jquery-ui datepicker with the month and years option to make selecting the birthdate easier.
If anyone can throw me some code to get started, I'd appreciate it. Right now when I click the text field, nothing happens.
Make sure you include jquery.js, jquery-ui.js, jquery-ui.css in your head html tag.
jQuery and jQuery-ui javascript files should be declared only once. You can check this by right-clicking your webpage (eg. in chrome) and select View Source Code. Also, on Source Code click the jquery.js, jquery-ui.js, jquery-ui.css and application.js links and make sure that your code is in there (if you don't find the code expected, check your paths).
application.js file should be declared after jquery and jquery-ui.
So your < head > should look like this:
<head>
<meta [your code]>
<title>[your code]</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<%= javascript_include_tag "application.js" %>
</head>
After some searching and experimenting this code worked out for me. It seems what I was using before either wasn't the object or I had it closed wrong.
$(function(){
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:2013'
});
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});

In Rails 3, how can you make a div a button (a clickable div that links to a new page)

I know that there are options to do this manually, such as here : How do you make the entire DIV clickable to go to another page?
However, in Rails 3 we make links like this:
<%= link_to "name", url %>
And I am wondering -- is there a proper Rails way to make a whole div a button. I realize I could make a button. However, let's say I want to fill it with content like text and a picture - then how would I make that whole div clickable in a rails way?
For example:
<%= #story.title %>
<%= #story.blurb %>
In this example, I would want to make #story clickable, with the rails generated content that I specified.. Any ideas?
For those interested, the answer is:
<div class="class_name">
<%= link_to content_tag(:span, "Text for the LInk"), route %>
</div>
And then, in the CSS set .class_name to position:relative; and:
.class_name span {
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0px;
left:0px;
}
The link will now assume the size of its parent container, and thus give the impression the whole container is a link.
I think that button_to is what you need :
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
I might use jquery if you really wanted to do this
$(document).ready(function() {
$('#somediv').click(function(event){
document.location = 'http://someplace.com';
});
});
You can't make a "clickable" raw div like that in a rails way... the concept doesn't make any sense. That's just not how it works
(added missing close parens for click)
not tested