I'm working on project with heavy usage of ExtJS lib and so far as i'm not really good in pure CSS crossbrowser layout developing, i decide to use ExtJS layouts for robust markup prototyping. There is only one problem -- i can't figure out how to make my pages scrollable, like in traditional sites. ExtJS just clips any content overflowing browser viewport, "autoScroll: true" makes no effect.
Based on the first ExtJS4 release and is no longer valid for newer versions
It depends on your layout... A viewport should only contain one element and will also ignore scrollable settings. That's because the viewport use the fit layout by default. Give the scrollable setting to one item of the viewport that will contain all your content and remember, this one cannot be of the layout type fit.
{
xtype: 'viewport',
items: [{
autoScoll: true // will be of xtype panel by default
items: // you content
}]
}
Related
I am new to Orchard and question myself how to mix up widgets and content. As of my understanding, the page content type has one layout where you put all your content in: HTML, images, et cetera. Where it will get displayed is defined by the theme. By placing widgets into the zones of the theme I can display custom modules in addition.
But, what if I want (for one specific page, from top to bottom)
Content/HTML -> Widget -> More Content/HTML -> Another Widget -> Even more Content/HTML?
I know it is possible to achieve that by placing the second and third content block into a widget and configure the layer to match the url of my page, but this seems to me like a hack.
In DNN you can place everything, HTML as well as modules, into the exact container/zone you want. In nasty Joomla! you can "import" modules (widgets) as part of the HTML of an article.
What is the way to achieve that mix up in Orchard?
You have tagged the question as orchardcms-1.10 so you should be able to do it.
Orchard has a module called Orchard.Layouts which provides the functionality that you are describing.
Are you using an upgrade old version?
If you have upgraded your site from an older version of Orchard then it will still just have the old style BodyPart as its main content editor. Fresh installs will have LayoutPart which can provide these kinds of complex layouts.
For an introduction on this subject look at IDeliverable's Orchard Layouts intro article.
If you are working with an old upgraded version please add a comment and I will explain the upgrade process.
Have you enabled the Layout Widgets module / feature?
If you already see this but can't add the widgets then make sure you enable the Widget Elements feature:
Go to:
Admin panel
Modules
Type widget into the filter at the top
Click Enable on the Widget Elements feature
Now when you go back to the layout editor you will see a new category with all the widgets placeable as elements.
Templates created using p:layout and p:layoutunit does not support responsive. How to make it responsive? Or Do I need to create a different template using Grid CSS as given in primefaces show case?
I am developing a web application with a menu to display on the left, header information like company name, date and other details on top, and the actual content on the center. All pages in the web application will follow the same pattern hence I used a layout and created it using p:layout and p:layoutunit.
But, the pages are looking very small when viewed on mobile (all are getting resized including the menu's on the left). Hence I thought of using responsive grid so that the pages can be viewed in desktops as well as in mobiles.
How I can change the exisitng application developed using the primefaces layout and layoutunits, to become responsive, as layout and layout units are not responsive. The primefaces showcase has given example using DIV only.
Hence, this question. Hope I made my question clear. Thank you.
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
I am using Orchard 1.4 and playing around with the Projection Widget.
One thing I am wondering about is how to control the positioning of the content on the Page.
I understand the widgets are placed in the designated zone, but what if I want to put the contents of the projection modules somewhere within the page content?
For Example :
Title
Some Page content here
Projection Module content
Some more Page content here
How do I do that?
Thanks!
You typically use placement.info to change the order of parts on the rendered page.
I am trying to dynamically adjust the width and height of a web part in a SharePoint web part page so that it fills up the entire available space. It appears that there is no way to choose a percentage for width and height from the web part property editor window in SharePoint. Also, trying to dynamically set it on the web part instance through code results in SharePoint throwing an exception to the effect that proportional dimensions are not supported.
Is there any way to do this using, for example, Javascript? I've seen similar things done using jQuery, but not exactly what I'm looking for (and I'm not familiar enough with jQuery to come up with something on my own).
There is a web part available that does this here. You can also see a solution on TechNet communities from "potta vijay kumar" (where I found that web part too):
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('contentpage').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('contentpage').height=
the_height;
}
contentpage is the ID of the iframe.
A jQuery solution is available from EndUserSharePoint.
Here's what I did:
I had an iFrame inside the middle webpart, where I will be loading webpages based on the left web part menu. So I took the <td> element where both the webparts are placed (its a <td> element with class set as ms-bodyareaframe)
var head=$('td.ms-bodyareaframe');
$("#myFrame").height(head.position.height()).attr('src',unescape(loc));
$("#myFrame").parent().height(head.height()-50);
This will perfectly re-size the webpart where the iframe resides.
Note: this may not work in all cases