I am currently developing a website that uses Google Custom Search and need to do some heavy CSS customisations. The thing is that I need it to be consistent between desktop and mobile layouts, as currently it is working fine for desktops, but looks broken on mobile phones due to the missing page numbering (on desktop it is 1 to 10, whereas on mobile it just shows: < Page 2 >).
Is there a way to trick Google CSE to always use the desktop layout, even on phones? I tried setting the UA string using Javascript in the website, but it did not work.
You can set the "mobileLayout" Search Element attribute to "disabled"
See https://developers.google.com/custom-search/docs/element#supported_attributes
example: <div class="gcse-search" data-mobileLayout="disabled"></div>
Related
I have a problem with changing header in elementor. When I want to change location of my button or site logo in mobile version in elementor header template nothing happens. Only when I move the button from desktop in elementor it changes on mobile too but that makes my desktop version look bad. Somebody please help I will be really grateful for any ideas. Thank you
You have to create 2 different sections 1 for desktop and 1 for mobile. Hide mobile version for desktop and desktop version for mobile. You can apply different styles for both desktop and mobile but for the change of positions of elements you need to use different sections. You can check the following screenshot. The top one for mobile header and bottom one for the desktop header.
screenshot
I am developing a Master-Detail application which should show an embedded PDF in its detail view. The project is based on UI5 version 1.48, so the new PDFViewer control can be used.
In desktop mode, everything works as expected:
But on a mobile screen, PDF is not showing properly:
The data source property binding at the PDFViewer is done by OData path.
<FlexBox id="fbPDFViewer"
direction="Column"
renderType="Div"
class="sapUiSmallMargin">
<PDFViewer id="idPDFViewer"
source="{myModel>/myPDFUrl}"
title=""
busy="true"
showDownloadButton="false"
height="700px"
width="95%"
loaded="onPDFLoaded"
errorMessage="{i18n>notFoundText}"
errorPlaceholderMessage="{i18n>notFoundText}">
</PDFViewer>
</FlexBox>
Even the SAP sample for embedded usage doesn't work on mobile devices.
According to the source code (1.48), the viewer renders its PDF document directly in the app / iframe only when ..:
The source is valid
It's coming from the same domain
It has a valid URI format
UI5 thinks the user is using a desktop computer (Device.system.desktop returns true) or the displayTypeapi, available since 1.58, is set to Embedded.
UI5 detects that the user agent (browser) has a certain type of PDF plugin enabled. Currently, there are no known mobile browsers which support displaying PDF documents directly in the page.
The steps 2 and 3 explain why the PDF is not rendered on a mobile device even if the source is valid. In such cases, I guess the only option is to provide a download option instead of trying to render the PDF forcefully in the mobile app.
You can use nabi.m.PDFViewer from the the nabi.m library. It works cross device, even on iOS (where you typically don't have the adobe PDF plugin). For details see https://github.com/nzamani/ui5-nabi-m
There you will find also how to try it out on localhost. I have also added some detailed instructions for deployment of the library to NW ABAP as well as SAP CP.
You can find live demos at http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.PDFViewer and http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.InPagePDFViewer
Open the two links on your iOS device or any other device to see how it looks like.
On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link. We've made this note in Fiori Design Guidelines 1.48 and we'll add it to the SDK documentation.
(More in openui5 issue 1759 on GitHub)
Thank you for your responses and hints...
Installing an Adobe Acrobat viewer on the mobile devices was not an option here.
Source of the PDF had same domain like app itself and had a valid URI format too
Due to project timeline in meantime I decided to fall back to a solution that SAP provided with it's "Paystub" (Fiori 1.0). Therein they're using a 3rd-Party control for displaying PDF's which unfortunately has an overhead of code and implementations steps but it works (with minor issues only) perfect on desktop devices as well as on mobile devices.
So far, this is workaround solved my requirement.
Thanks.
I am working on a project using Xamarin.Forms as a container app. This app includes several webviews that link to restricted web content. One of these links our Sharepoint site. The Sharepoint site has a link that allows our users to go to a 3rd party site(Cornerstone) to view training videos. When using the stock UIWebView, WKWebView, or SFSafariViewController the popup that displays the video is not shown. The only way that I can get this video to play in my app is to use OpenURL to open the Sharepoint site in Safari. The problem is that this is an Enterprise solution where we don't want to allow the employees free reign with the browser.
Is there a way to create a whitelist or to have some control over the searchbar or read the url that they are linking to and block it or redirect the user?
Unfortunately as it's farming out the URL Navigation external to your application there's not a lot you can do from within your app to restrict what they do after the fact, 'openURL' only returns a Boolean value as to it's success, and the only parameters that you can send to it are:
application - Reference to this application
(UIApplication.SharedApplication).
url - The NSUrl specified by the
calling application.
sourceApplication - The bundle ID of the calling
application.
annotation -Optional property-list data passed by the
calling application.
You can only access these if you override the 'openURL' method within your 'AppDelegate.cs' class, there is a set of options you can pass through as an override but again none of those allow you to restrict what the user does after the browser has opened.
If the devices are managed using something like 'meraki' or some other software to control the use of managed devices, then you would likely set up a 'group policy' styled set of restrictions however that's not really a Xamarin issue, and should be discussed with the network administrators.
That being said, I don't see any reason why you can't use the WebView1, that way you can handle it all within your application. Or alternative utilize custom renderers and pass in the direct video urls and commit to opening up the devices media player for streaming the content2.
1 Playing videos in WebView
2 Using the media manager plugin.
I am trying to get a mobile suitable version of the page with the query http://en.wikipedia.org/w/api.php?mobileformat=&noimages=&format=json&action=parse&prop=text&page=Snow. I expected that the page content would be like on the mobile version of wikipedia, but I am still receiving the desktop version with wide tables etc. However the result contains no images.
Width is controlled by style sheets which you'll have to add yourself. There are no images because you specified the no images parameter.
I'm creating a mobile web application that will run on webkit browsers. The thing is I have a textbox, whose value needs to be validated after the user has typed in some value.
Is there a blur event for input elements in mobile browsers? I've tried searching for it on the web, but couldn't find the right reference.
Regards,
Erwin