Make content go into Bootstrap modal on mobile - but stay visible on larger viewports - bootstrap-modal

I have a filter, which is the same on mobile and desktop.
On desktop I want it to always be shown in the left side (and that is working), but when the user visits from a mobile phone, I want to make the filter "hidden" and instead be shown in a modal, that is triggered by a button.
Problem is I can't just duplicate the content since it is a filter, så I need to be able to make tha HTML always visible on desktop - and in a modal on mobile.
How is that possbile?

Related

Refresh browser after modal dialog

My application calls a modal window from the navigation bar. The modal window has a pop-up LOV where the user selects an organization they wish to view data for. As soon as the change event occurs, the page is submitted, recording the new organization id and organization name into session state. The modal dialog is then closed.
The navigation bar displays the name of the organization that is stored in session state, making it simple for the user to tell which organization they are working with.
Since the modal to change organizations can be accessed from any page in the application, I need to be able to refresh the web browser to pick up the new organization name displayed in the nav bar once the modal has closed.
I've seen several posts online as to how to refresh a region or report once a modal closes, but I've not uncovered how to refresh the browser window, or perhaps alternatively, how to redirect back to the page where the user was when they accessed the modal via the nav bar.
How can this be achieved?
(Nav Bar displaying current context, and link to modal window)
#TineO - I was orginally thinking the same as you suggested, but the implementation wasn't coming together for me.
After further internet mining, I found this blog post which led me to a working solution, below. The bind variable :REFERRING_PAGE is a hidden field, which is populated by the link in the nav bar, using the configuration in the second image below.
You can create dynamic action or process which can work on 'click' action. You may just run 'submit page' or pl/sql or from a huge list of activities as per your need.
Hope this helps.

Retool: Action button to open modal with container

I have a table in retool. I've added an "action" column with buttons and renamed them "edit". What I would like to do on click of the action button is to open a modal with the data in the row populated. A user should be able to see the values of the row, edit them and when he clicks "submit" it will send an update API call for that row's unique id.
We’re working on some new docs for modal components, but until then here’s what you can do:
Drag a modal component onto your canvas. It’s going to appear as a button that opens a model, but don’t worry about that just yet
Create a Javascript query in the query editor that opens the modal. If we’re working with the default names, your query would be modal1.open()
Configure the action button in your table to run that JS query on click
That’s a quick way to open a modal through an action button. In terms of what’s in that modal, you can drag any components you want and reference table properties. So if you wanted to display a user’s email, you could drag a text component into the model and set its value to table1.selectedRow.data.email.
The last thing to deal with is the button, which you probably don’t want since you’re opening the modal via action buttons. You can hide it by clicking on it, heading to the inspector in the right sidebar, and scrolling down to the “display” settings. Just put true into the “Hide when true” field and the button won’t show.
hello stack overflow family this is my first post.
we are facing same issue today so i used one trick for opening a modal in action, i run one query that query name is model_open and in success event i select modal open and this query is triggered in Action edit option ,
i hope my first post help you ... :)

Need to click on a widget to give it focus in Power BI Embedded

I have a Power BI embedded report, embedded in my web app.
While the report is working as expected I find that I need to click on a widget within the report before being able to click on the items within the widget.
So for example I have a slicer containing a list of names. When I first click on the slicer, it selects the slicer but does not drop down the list of names, the next click allows me to see the list of names.
Is there anything I can do to change this behaviour, such that the first click on the slicer shows the list of names available.
It seems this is caused by me requesting the report in mobile view. Switching to desktop view stop the second click issue.
I had chosen mobile view, as this view allowed the UI to switch between views (landscape/portrait) dynamically without having to reload the report. In desktop view if the user resizes the browser page, the report shrinks shrinks rather than switch between views.

Mobile version of site with additional screen for navigation

I have a Joomla 2.5 site and I'm creating a mobile version of it. I want to use the same menus and same articles but adjust the content. For this I'm using a simple mobile detection plugin so it changes the stylesheet only. This all works fine.
However, I need an additional page that just contains the main menu. In Joomla you have a default page and this is currently my home page for both my desktop and mobile version. I want the mobile site to load my main menu page first then the user can navigate from there. Does anyone know of the best way to do this?
A site can only have one default page so you will need to redirect a user to the mobile menu page when they first visit the site. There's a couple of ways to do this would be to set a cookie indicating they have been to the main navigation or use session variables. In either case, you would need to add a plugin or code to the default page to determine if they need to be redirected or not.
That said, why not just make your template responsive. It's fairly easy to implement the Bootstrap framework (there are tons of templates already out there using Bootstrap) and then it is trivial to show or hide content based on the size of the screen the user has.

Customizing Icons at the top of the Page

I'm maintaining a Facebook iFrame application, and my client is worried about the transition to Timeline. Basically, they want their home page to have a big icon next to 'Photos' that takes the user to the page hosting the iFrame. The tricky thing is that users can "pledge" within the app, and they want the link icon to look different depending on whether or not the user has pledged within the app. Is there any way to do this?
Assuming the answer is no, is there a way to add a second icon for the iFrame app so that I can customize one to look different? Or would I need to set up another page hosting the same iFrame?
Thanks!
Go to Fan Page Timeline, click the arrow on the half box to the right of photos, likes etc (assuming you haven't changed the order of the apps), hover over the icon you want to change and click on the pencil icon that shows up in the top right corner. Then click "edit settings". Here you can change the tab image or give the tab a custom name.
alternatively you can enter the edit page settings, go to the apps section, edit the app, and you can change the icon from there.
in either case, you will need to be a page admin to complete the task.
Update on 4/12
Facebook just added the functionality for developers to set a default image. Here is the post in the Developer Blog.