I'm trying to use #angular/google-maps and I have a map showing at 500px X 500px and I am trying to set a custom height and width but it seems that the map-container class overrides the style of the tag??
I can not use .scss because I need the height and width to react to variables in the .ts
This seems like it should be a no-brainer but I've working on it for hours now!
Any help is greatly appreciated
I started using #bespunky/angular-google-maps easier that #angular/google-maps and fixes most of the problems with #agm/core
It's the best library out there currently for using Google maps in angular.
The key is to define it inside your HTML
`<google-map
#myGoogleMap
id="map"
[zoom]="zoom"
[height]="600"
[width]="550"
>
</google-map>`
Related
Live site is here: www.wiivv.com
Here's a video of the issue: http://imgur.com/a/JEFne
On mobile, buttons are skipping around when you scroll. I think the issue may have something to do with Slick Carousel.
How would you troubleshoot an issue like this?
Looks like Slick is adjusting the height of your slideshow div according to the device you are using. It doesn't know to adjust the height for your second button.
The height adjustment to the div is usually done via Javascript. You can adjust the JS code to suit your buttons or put some CSS media queries in place to override what the JS is putting on your div.
I'd like to animate some CSS styles not supported by {N}.
For example, text-color, height of an element etc.
Any suggestions, ideas as to how this could be done.
A simple linear animation would be fine.
Thanks.
we want to know about the responsive design for website. is it applies for
both height and width of the site . can we make a site responsive for height also?
please help me to find solution.
let me know if you have need clarification
thanks in advance.
Most people tend to think of responsive design as being responsive to different screen widths which then allows users to view content optimally on any screen but does mean that they still must scroll to see more content below.
There is however also a school of thought around Vertically Responsive Design which looks at responsive design for height as well as width just as you're looking for.
There is a great article on this here:
http://www.nitinh.com/2013/03/vertically-responsive-design-keeping-things-above-the-fold/
It contains some good little CSS snippets to get you started, generally making use of viewport height to give optimal spacing and sizing for height as well as width using responsive design.
Most modern browser support viewport height but you could also use #media rules in much the same way as you would for width, setting different CSS rules for different screen heights with:
#media screen and ( max-height:540px ){
somecss:rules;
}
There's some further reading on using #media for height here:
http://unmatchedstyle.com/news/height-based-media-queries.php
Hope this helps.
I am using SVG inside React, but the amount of SVG tags that ReactJS allows is limited and I don't see a way to embed an <image/> SVG tag inside my JSX.
I've also tried using a fill style on a rect set to a url of an image, but it doesn't work either. Is there a workaround for this?
SVG Image is now supported in 0.14.
For prior versions, you can use dangerouslySetInnerHTML. For more about that, take a look at this issue:
https://github.com/facebook/react/issues/2069
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.