I have this webbrowser view of a page, with a Google map.
Then I have added some #Media Print style
<style type="text/css">
#media print
{
body{font-family:georgia,times,sans-serif;}
img{max-width:500px;}
#headerblock{display:none;}
#navigationblock{display:none;}
#thewaydiv{display:block;}
#footerblock{display:none;}
#contentmap{min-height:100px; position:relative; width:100%;}
#map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;}
}
</style>
When I then use print page or print view then I get this:
As you can see the Google map is OK in the size for the page, but it's too big/just a little part of the true image. How can I fix this, so I get a Google image like the Browser View on the Print View?
This cannot be done using CSS.
You will need a special page with a map sized as it has to be printed, or zoom-out the map before printing(this may be done using javascript).
I also ran into this issue with dynamic data driven maps.
I did however find a way of using css to make this work a little smoother without having to manipulate the map using the API or a clunky separate map page.
I gave the map a container div with a defined height and set its css overflow to hidden.
I added a second map under the first using the same setup but with a printable dimension like 700px width by 500px height.
Lastly the print stylesheet simply has display:none for the first map revealing the second hidden map in its container.
Is this hacky?
Maybe, but it worked instantly for me.
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
This is a continuation of this question where I asked how to center a number (i.e. text return) from the Google Visualization API. The new issue I am having is that I want to show progress bars for a specific piece of data, and I would like to center them. I am using the Bar Format. However, my CSS does not seem to work. I know that I should be able to apply CSS to a specific tag within a named element (or I believe I can).
Here is picture of the current site:
I believe if I can remove float: left; as inherited from the google process and add margin: 0 auto; this will all work. Here is a JSFiddle of my work so far.
Yes, removing the float:left; works well.
With reference to your question How do I center numbers in a table from Google Visualization API?, the solution is simple as stated in one of its anwser.
You need to overwrite the css inherited by the API for the span tag inside the td.
span{
float:none !important;
}
Here's the fiddle for it: http://jsfiddle.net/a8e3re72/5/
I am trying to show a particular location by embedding a Google map to my site using Maps Engine Lite. However I get this black bar (with the text Untitled Map as shown below) at the top of the map which I need to get rid of. Any ideas how to proceed with this -
There are no implemented options to hide the bar, but it could be done via CSS.
example assuming a desired iframe-size of 580x160
<div style="height:160px;display:inline-block;overflow:hidden;border:1px solid #000">
<iframe style="position:relative;top:-27px; border:none;"
src="/path/to/embedmap"
width="580" height="187"></iframe>
</div>
The iframe is wrapped in a div with a height set to the desired height. The height of the iframe is set to the desired height +27px . Via top:-27px; the iframe will be moved 27px upwards, the bar disappears.
I recently created a fb page for sharing my photography work. I'm new to iframes n stuff so I did my welcome page via an app provided by wildfire
Here is the link to the page https://www.facebook.com/pages/Bharath-Keshav-Photography/144046682351773
Now, how exactly do i get rid of the vertical scroll? The app specifically says that scripts aren't allowed. Also, setting body style="overflow: hidden" isn't allowed as tells me that the body tag can't be used
The best solution would be to use the JS-SDK.
You can either use FB.Canvas.SetAutoResize to have your page automatically resized or, if you know exactly what the height and width of the page will be, use Fb.Canvas.SetSize
You can find more info here: https://developers.facebook.com/docs/reference/javascript/
Also, keep in mind that the maximum width of a page app is 520 pixels and from personal experience, it's best to keep it around 500-510px
You have to make your css in this way
body {
width:520px;
margin:0;
padding:0;
border:0;
overflow:hidden;
}
and use FB.Canvas.setAutoResize();
In this way you can do your tab 520 pixel without scrollbar
I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}