Dynamic SharePoint web part width and height - sharepoint

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

Related

How to identify in code that webpart is used full-width in SPFx

Currently i'm able to create webpart in SharePoint that is allowed to use in full-width mode(manifest:"supportsFullBleed": true). But i need to change some styles accordingly. Is there any way how to identify that webpart is used full-width in code?
SPFx used: 1.15.2
I tried check of width of element, it works in some cases, but when full-width webpart is used in for example mobile than width its not reliable.
The best shot I've seen regarding this may be the "formFactor" context property (it's hidden/not available with type definitions, but actually it exists):
https://learn.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpartcontext?view=sp-typescript-latest##microsoft-sp-webpart-base-basewebpartcontext-formfactor-member

template designed using p:layout and p:layoutunit does not support responsive. How to make it responsive? Or Do I need to create a template with DIV?

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.

How can I specify a background image for a content query Webpart in SharePoint 2010?

How can I style the background of a content query webpart in SharePoint 2010?
I have been having a look around, and can't seem to figure it out. I am able to edit the individual item styles using the ItemStyle.xsl file in SharePoint designer, but I need a background image on the container.
I have referenced the class that is generated by SharePoint - 'WebPartWPQ4' - in CSS, and made it work that way, but that changes the styles for all web parts in the system. (This also feels like a bit of a hack)
Any help would be greatly appreciated.
It is totally okay that you try to override custom styles in your css (although 'WebPartWPQ4' is not the best choice). However, to get what you need, just ensure that the web part you want to style has some wrapper around it and change selector in your css to .wrapper > .WebPartWPQ4 so that only this instance of the web part gets styled.
The way I have solved this is to wrap the webpart zone in a div in the .aspx page file.
You can then reference this div in a css file.

How can I use alternate shape templates in different zones on the same page?

I'm trying to create a theme in orchard. I have a main content zone and a sidebar zone which is on the right of my main content area (2 column layout). The main content area displays a list of blog posts (including tags, etc. Standard Orchard behaviour).
In the sidebar I would like to display the recent blog post widgets. However, the standard widget renders tags, published date etc. I do not want to display this information in the sidebar zone.
The placement file does not seem to be the right place to configure this as I can't specifically target the Parts_Tags_ShowTags shape in the sidebar zone. Neither does it seem to be possible to create a new template like Tags.ShowTags-Sidebar.cshtml
Any suggestions on how to modify/hide a shape in one zone on a page but not the other?
You can either use an alternate (shape tracing can help with that) or take this over entirely (see this post for details: http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx)

web part title in xsl

I'm investigating a possible solution where all web parts on my page should be rendered without a chrome, meaning that the default title portion of the web part will be hidden, but the title supplied in the web part properties should be used elsewhere in the web part.
I have found several solutions on how to get the page title but none around how I can crab the web part title and display it using Xsl, would like to return this within the ItemStyle.xsl
I used a method of return the raw xml data for the web part, but by default is the title of the web part not return, and I found no reference other than OuterTemplate.GetTitle() which points to the Title column of a list, to support my solution.
Is this possible?
It is probably not accessible through the xsl itself, as the title of the webpart is not part of the xml data coming through. If you really need it, you could show it on the page and use JQuery/Javascript to scrape it off. Otherwise, I might find a different way to provide the name, maybe with a query parameter.

Resources