I have a rails 4 application which is using the twitter-bootstrap-rails gem.
For some functionality, I need to render a view outside of the application layout since it has its own custom CSS and layout which must remain separate from bootstrap. The CSS file has been placed in the assets folder and the necessary line has been added to the assets.rb file. There is a view that's been created, which contains the document declaration, head and body.
A custom route and controller action were put in, and are working fine. However when the link is clicked to trigger this action, the page does not load the view correctly. The head still contains declarations for bootstrap files, despite them not existing in the view for this action. If the page is reloaded, it is displayed as intended.
Here is the controller code:
def qrcode
render file: 'app/views/boxes/qrcode.html.erb', layout: false
end
This behaviour is uniform across Safari, Chrome and Firefox, both running locally and on Heroku.
EDIT 2015-05-08
It turns out the bootstrap application.js is interfering with the CSS, however it is not declared in the custom layout and should not have been loaded at all.
The application.js is only declared in the application layout.
Controller method
def qrcode
#qr = RQRCode::QRCode.new("#{scan_url slug: #box.identifier}", size: 8).to_img.resize(400, 400).to_data_url
render layout: "label"
end
Label layout
Please forgive the amateurish HTML.
<div class="qrcode">
<%= image_tag #qr, id: "qr" %>
</div>
<div class="label">
From: Text Here<br>
Text Here
<br>
To: Text Here<br>
Text Here
</div>
Another update
Turns out the turbolinks.js file was causing the unusual behaviour.
Related
I am working on a visualforce page using an inputField on custom object with a date field and looks something like this:
<apex:page id="myVisualForcePage" showheader="false" controller="myController">
<apex:composition template="myTemplate">
<apex:define name="body">
<apex:outputpanel id="fullPage">
<div class="form-group">
!A bunch of other stuff!
<label class="col-xs-4">My Date</label>
<div class="col-xs-8">
<apex:inputfield id="myDate" styleClass="form-control" value="{!myControllerObject.MyCustomDateField__c}"/>
</div>
</div>
</apex:outputpanel>
</apex:define>
<apex:composition>
</apex:page>
For some reason the datePicker is not being formatted correctly on page load until an actionFunction is called.
This appears to be because the some of the standard salesforce css styling classes do not load on page load until the call is made.
When the page is loaded, we can see that the datePicker does not have the standard elements.css class associated with it and there is no link to the style class:
Datepicker Element
Datepicker Element Styling
CSS links before callout
Following a call to the action function, we can see below that all of salesforce's standard css styling classes are loaded and that the datepicker now has styling elements from element.css which was loaded:
Newly loaded css styling links
New element styles for date picker
If anyone has any information about why this may be happening and how to ensure the resources are loaded on page load I would really appreciate it!
As an update, if I load the following resource resource explicitly then it will work correctly:
<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>
However, I do not need to do this on other pages and I am wondering why? Could this be a difference in API's?
By specifying showHeader=false you're declaring you don't want any SF "overhead" on your page, including stylesheets.
Check <apex:page> and consider explicitly adding standardStylesheets="true"... In theory it's a default but looks like you uncovered some funny behavio(u)r.
standardStylesheets: A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header
if the showHeader attribute is set to false. If set to true, the
standard stylesheets are added to the generated page header. If not
specified, this value defaults to true. By setting this to false,
components that require Salesforce.com CSS may not display correctly,
and their styling may change between releases.
For anyone who has this issue, try changing your visualforce page's API version. I find that v39 works fine but I had a page on v41 and v44 that both had this problem.
As you probably already know, I'm working hard on some XPM templates with Razor. I've ran into another issue, this time concerning rendering components inside templates in order to make them siteEditable.
The following I'm not sure about. I've got a component which has a title field called "Title", and multivalue componentlink fields which consists of components with a title, description and image. Let's call this one "Linked USP" for now.
Currently this is being rendered by a Template called 'Page Banner', and it just iterates over fields with some If-loops to determine it's presentation, especially for the Title. In order for XPM to work, this template needs to render the component presentation of "Linked USP". So we've created a template called "[XPM] USP ITEM". - this Component template has the 'enable content editing TBB" added to it.
Now the issue arises when I want to make the Title Editable as well. Sounds straightforward, no? Not really - because when the parent template has got a "enable for content editing" TBB added, it will add <span> tags to all editable fields but the templates that gets invoked inside this template will also have <span> -tags, effectively bloating the html and making it impossible to edit the fields inside the RenderComponentPresentation because of duplicate <span>s.
Some code for your fun and to illustrate my issue:
<h1>#RenderComponentField("Title", 0)</h1>
#Foreach(var linkedUSP in Fields.USPS){
#RenderComponentPresentation("linkedUSP.ID", "tcm:10-1076-32")
}
This template has an enable Content edit TBB added.
now, for the RCP mentioned above, inside its [XPM] template:
<div class="title">#RenderComponentField("Title", 0)</div>
<p>#RenderComponentField("Description", 0)</p>
<tcdl:ComponentField name="img">
<img src="#img" alt="img.MetaData.alt">
</tcdl:ComponentField>
This one ALSO has the "Enable Content Edit" TBB added. On the front end this happens:
<div class="title"><span><span>Men</span></span></div>
Because the parent template also adds spans to the field.
So my question: how do i solve this? The Title field mentioned above has to be inside the parent template, but I can't create a special template for it becuase it is no component link. I can't get the TBB out of my RCP template, because it won't be editable that way. Interesting huh?
Can't I disable the spans inside template builder somehow?
I want to create a custom content block in Sitefinity so I can wrap an tag around it and pick up my CSS.
I created a custom widget, but I'm not sure how to make it a content block. I cannot find documentation on this, but I'm sure it is a common occurrence. Basically, I want a drag out content block that does this:
<aside>
[code for content block]
</aside>
I don't know how to generate the [content block] code in .net. I am new to .net development. I am using VB but can use C#.
Any help would be greatly appreciated. Thank you.
Maria
You can create a custom Layout Control which can be used in conjunction with other controls, such as Content Blocks.
To create a Layout control, open your project in Visual Studio and create a new control (.ascx) file in the WebApp project. I normally put mine in a ~/LayoutControls folder which I create. In that control file, enter something like:
<div runat="server" class="sf_cols">
<aside>
<div id="Div1" runat="server" class="sf_colsIn"></div>
</aside>
</div>
You'll notice that besides the markup you want, the aside tag, I have two other divs with some specifics. These are needed so Sitefinity can treat this as a control, and be able to dynamically inject content into it.
A div with class sf_cols is common to all controls and the div with class sf_colsIn (id="Div1") is where control you drop onto the layout control will go. So there is an outer wrapper div, your markup, and an inner div. It's the inner div where your content will go.
Save your file, compile the project, then register the control in Sitefinity.
To do that, login to the backend then navigate to Administration | Settings | Advanced Settings | Toolboxes | Toolboxes | PageLayouts | Sections. I normally add a new section with these properties:
name=Custom,Title=Custom,Description=Custom Layouts,Global resourceClassId=PageResources
Then select your new section, select Tools, then Create New. The Name, Title, Description are whatever makes sense for you control. The Control CLR Type should be Telerik.Sitefinity.Web.UI.LayoutControl, Telerik.Sitefinity and the Layout Template should be the path to your ascx file, i.e. ~/LayoutControls/AsideBlock.ascx. The other properties can have the default values (most are just blank). Then Save.
Now when you are editing a page, click the 'Layout' button in the right hand column and you will see a 'Custom' Section which contains your control. Drag it onto the page, then go back to 'Content' editing (using the button in the right hand column). You will see your layout control and drop a content block onto it.
Add content normally. When the page renders, the content will be wrapped in the aside tag.
the easiest way to do this is with an external template for the content block. The template you want is ContentBlock.ascx and is in the SDK.
Copy this file to your project then add the wrapping tags around the contentHtml literal control (which renders the actual content of the control).
Then open the Advanced settings of the content block widget you want to use this template and specifiy the LayoutTemplatePath. It should have a default value of something like "~/SFRes/Telerik.Sitefinity.Resources.Templates.Backend.GenericContent.ContentBlock.ascx".
Simply change this to the virtual path to the template you created, then save and publish the page.
The content block will render with your template instead of the default one, with any markup you add.
I hope this is helpful!
I'm going to create a more detailed blog post that walks through this process and will link it here when I'm done. thank you for the inspiration!
I am trying to load different html pages based on each global tab (each tab would load a different html page) using getText. Does anyone know the code to specify a certain tab for each different piece of text? The code below loads the same text into all the tabs:
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/graduate-study/highlghts-grad"
tal:replace="structure here/graduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/undergraduate-study/highlghts-grad"
tal:replace="structure here/undergraduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
etc, etc for all tabs...
The global tabs in Plone are navigation roots. You can detect the current active navigation root in two ways:
The body HTML tag has a section-[id_of_section] CSS class, where id_of_section varies with the pathname of each section.
From a viewlet or portlet you can retrieve these classes using the ##plone_layout view:
tal:define="plone_layout context/##plone_layout;
bodyClass python:plone_layout.bodyClass(template, view)"
after which you'll have to test if a certain state- string is present in the bodyClass value.
By retrieving he current navigation root directly from the ##plone_portal_state view:
tal:define="plone_portal_state context/##plone_portal_state;
nav_root plone_portal_state/navigation_root;
nav_root_id nav_root/getId"
You can then vary your viewlet or portlet based on the nav_root_id.
Note however that each navigation root is has a portal type, and possibly an interface declaration, that you could use to register viewlets or portlets for. Detecting the exact navigation is usually not the best option.
This effect is commonly referred to as a "megamenu." There is a product that implements this for Plone, http://plone.org/products/collective.collage.megamenu/. I've not used it, but I'd certainly recommend that you explore it as a starting point.
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.