I am currently using this code.
<g:plus action="share" annotation="bubble" expandTo="top" href="#">
The expandTo is not working though. The info popup just show below the share button. I need it to display on top.
Thanks for any help :)
Edit: It appears it displays relative to where there share button is displayed on screen. If it is at the bottom of the screen then the bubble appears on top.
Is there a way to force the bubble to the top?
Related
My slider component disappears when it should pin to the page. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock. I cannot get it to work though, my content keeps disappearing. Here is a minimal demo: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx
Here is also a link to the final webpage: https://juliaweber-git-preview-inzn.vercel.app
Any help is greatly appreciated!
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I have a chat page in a ionic project and like most chat apps I want to start the list of messages at the bottom of the page.
As far as I know with the help of google in the web world it is not possible to generate a list of items in a reversed order on the screen like in native apps.
The most common work around for this is scroll the page to the bottom on page load. I tried this and in most cases there are performance issues, scroll delays, list not responding for a few seconds etc. so not the desired solution.
No I came up with a different approach, with css I flipped the list of items so that the list is upside down. I also flipped the items in the list so that they are flipped back and are not upside down anymore. Now I have the result I want, I have a list with items with item 1 at the bottom without the need to scroll to the bottom.
.listUpsideDown {
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
.messageUpsideDown {
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
There is only one downside, because I flip the list the scroll direction is also reversed. So now I'm looking for a way to reverse the scroll input direction.
I hope someone can help me with this.
I have a working fiddle with my current situation where I need to reverse the mouse scroll input direction jsfiddle example .
Instead of doing other workarounds, stick to scrolling to bottom. As you are using ionic, use $ionicScrollDelegate service, Just call $ionicScrollDelegate.scrollBottom(); from your controller when you want to scroll to bottom.
Plus if you want to put animation, while it is going to bottom use $ionicScrollDelegate.scrollBottom([true])
I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.
Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).
So, the navicon has right now the following code to trigger the transition:
ng-click="open = !open" ng-class="{'open-mob':open}">
I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.
Being so, is there some straight way to check if the class is there using AngularJS?
Something like if class = slidRight -> "open = !open".
Thanks!!
for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:
angular.element(myElement).hasClass('my-class');
angular.element(myElement).addClass('new-class');
angular.element(myElement).removeClass('old-class');
hope this help someone ...
Angular uses jqLite's .hasClass() natively.
Read here on the angular docs for more info.
http://docs.angularjs.org/api/angular.element
https://docs.angularjs.org/api/ng/function/angular.element