I am trying to place an editable spreadsheet control in a webpage without the menus and toolbars. I saw the postings about this and the last one said to use Google Docs spreadsheet and then choose Publish. If you use "?widget=true&headers=false" then the menus and toolbars will be removed.
This works great. The only problem is the data is not editable! It's a static spreadsheet. Is there a way to get the google spreadsheet control in a web page without menus and toolbars but make it editable?
I simply put the spreadsheet control inside a div and used the div to cover up the tool bars and scroll bars, etc. Worked great.
Here is the html:
<div id='spreadsheet' style="position:absolute; top: 900px; left: 3px; width: 1058px; height: 350px;overflow: hidden">
<iframe style="position:relative; top: -143px; left: -48px; width: 1140px; height: 650px;" src="https://docs.google.com/spreadsheets/d/1zt7JNkuqYKGKxRXSTtgjWeUFnCxRjSLB0UKs1oJk6PY/edit#gid=1047354991?widget=true&headers=false" width="600" height="600"></iframe>
</div>
Related
I will like to replace ClaimProviderSelection buttons with just hypertext links. How can I go about this? I have taken a look a sample css (I am not a content developer) but it seems the part I am interested in is what B2C merges with between the <div id="api"></div> elements.
Please help.
B2C injects its HTML into the <div id="api"></div> element on the page layout template. Those buttons will all have the accountButton class so can be identified with the CSS selector #api button.accountButton.
If you're already using custom page templates then you should just be able to update your CSS to target those button elements and remove all of the default button styling, similar to this:
#api button.accountButton
{
background: none;
color: black;
border: none;
display: inline-block;
padding: 0;
margin: 0;
text-decoration: underline;
}
If you're not already using custom page layout templates then that should be your first step. There's guidance in the Microsoft Docs about how to do that both if you're using user flows and custom policies.
I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.
That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.
There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.
Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.
Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):
<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />
label.upload {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 2px;
cursor: pointer;
}
input.upload {
display: none;
}
If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.
label.upload {
padding: 2px;
border: 1px solid gray;
border-radius: 2px;
background: lightgray;
cursor: pointer;
}
If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.
A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.
I am trying to create text-box hyperlinks for my website. I want transparent boxes until hovered over then i want to box to change colour but not the text. i was wondering if their was a way to do this?
Using CSS you'll want to add background-color: yourcolor to the hover pseudo class.
Here's an example for you:
<!-- Here's the HTML -->
<div class="myDiv">
<p>Here is some text and then you will be linking to another site</p>
</div>
Then in your CSS you'll have:
.myDiv a:hover {
background-color: red;
}
Pretty Simple.
I have simple treeTable. http://www.primefaces.org/showcase/ui/treeTable.jsf
I want to change expand and collapse icon of this treeTable. How can I do that?
If you want to use custom icons (images), override the following CSS classes for their respective uses, on the treetable:
ui-icon : to customise the expanded-row state icon (the triangle)
.ui-icon {
width: 16px;
height: 16px;
background-image: url("/your-image-here");
}
ui-icon-triangle-1-e ui-c : to customize the collapsed-row state icon
If you want to use more modern fontAwesome 'icons', see Change icon from jQuery UI to FontAwesome in PrimeFaces
I am trying to style the master page in Sharepoint Foundation 2010. I"m using the nightandday master and styles.
The design has no ribbon and I just need to turn it off. Just plain old off. When I set the ribbon div to display: none, the entire top banner disappears.
I'm not a sharepoint dev and am lost in general. Is there an easy way to just hide/get rid of the ribbon? Nothing fancy about permissions required--just needs to be always gone.
The CSS classes you want to look at are;
<style type="text/css">
div#s4-ribbonrow.s4-pr.s4-ribbonrowhidetitle { height:43px !important }
/*.ms-cui-ribbon { display:none; }*/
.s4-ribbonrowhidetitle s4-notdlg noindex { height: 43px !important; }
.s4-title h1 a,.s4-title h2 a,.s4-title h2 { font-size: small; }
.ms-pagetitleareaframe table { background: none; }
#s4-leftpanel-content { display:none !important; }
#s4-titlerowhidetitle { display:none !important; }
.s4-ca { margin-left:0px !important; margin-right:0px !important; }
</style>
You should be able to use the information in this article to get you started.
http://www.endusersharepoint.com/2010/11/09/hiding-the-sharepoint-2010-ribbon-from-anonymous-users/
In case someone has been struggling with this issue. Hiding the Ribbon may cause some further issues (http://social.msdn.microsoft.com/Forums/en-US/9422aa0f-5010-4691-a0ab-25e7aca6b478/issue-with-div-s4workspace-and-scroll-bar)
Especially if you will include your own header and hide the Ribbon.
A quick workaround is using css. #s4-workspace will still receive the correct height & scrollbar won't be an issue as well as the ribbon will be hidden.:
body #s4-ribbonrow {
height: 0px !important;
min-height: 0px !important;
}
As documented in the linked page of knight0323's answer, the ribbon can be hidden by editing v4.master and wrapping the ribbon div with <SharePoint:SPSecurityTrimmedControl/>:
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
<!-- Ribbon code appears here... -->
</div>
</SharePoint:SPSecurityTrimmedControl>
Unfortunately on my system this has a side-effect where the page's scroll-bar starts misbehaving. This appears to be a result of a dependency between the ribbon and the s4-workspace div. So to resolve this I moved <SharePoint:SPSecurityTrimmedControl/> in from the ribbon div to wrap the <div id="s4-ribboncont"> and added the following markup near the top of v4.master:
<style type="text/css">
#s4-ribbonrow { display: none; }
</style>
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<style type="text/css">
#s4-ribbonrow { display: block; }
</style>
</SharePoint:SPSecurityTrimmedControl>
The effect of this is that the ribbon is hidden by default but sufficient markup remains in the DOM so the page continues to behave correctly. For administrators, the ribbon is displayed normally.
In case anybody else is struggling with this, here are full instructions to do this without breaking the scroll bar or losing the title bar area, or any other oddities:
Hiding a Sharepoint 2010 ribbon that does not lose the titlebar area