Kendo Datepicker: changing its size or fonts inside - css

I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:
The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.
I have tried adding this to the CSS:
.k-popup .k-calendar {
font-size: 10px !important;
}
And the result was odd:
It only worked partially because only the month name was reduced, the numbers remained large...
The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.
EDIT
I tried to add the k-calendar class:
#(Html.Kendo().DatePicker()
.Name("concessionTOD")
.Start(CalendarView.Month)
.Value(DateTime.Now)
.Format("yyyy-MM-dd")
.Culture("pt-PT")
.HtmlAttributes(new { #class = "k-calendar" })
)
but the result was this:
you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.
EDIT 2
I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:
So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.
Also, I found in the documentation that
Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
I'm not sure how to interpret the second sentence but it may help in dealing with the issue.

Use the following CSS selector / definition:
.k-calendar {
font-size: 10px;
}
Check the following code snippet.
$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
title: "window with datepicker"
});
.k-calendar {
font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="win">
<input id="datepicker" value="10/10/2011"/>
</div>

OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.
So, I removed my iFrame setting from the Kendo Window:
#(Html.Kendo().Window()
.Name("addConcessionWindow")
.Modal(true)
//.Iframe(true)
.Visible(false)
)
and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).
Bottomline is:
it is not possible to have an overflowed iframe.

Related

Why does Ajaxify'ing a standard MVC Razor Web Application result in mobile CSS styles?

Before jumping off the deep end with Ajaxify on a large Razor project, I thought it best to create an MVC4/Razor test-bed app and try it out.
Repro:
Created a standard MVC4/Razor Web Application in VS 2012
Added the requisite JQuery add-in files (It already has JQuery 1.8.2 by default in the Razor project template).
Added this to BundleConfig.RegisterBundles
bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
"~/Scripts/jquery-scrollto-{version}.js",
"~/Scripts/jquery.history-{version}.js",
"~/Scripts/ajaxify-html5-{version}.js"
));
Note: I rename all add-ins to the MS standard ~/scripts/addinname-9.9.9.js format to allow for easier upgrading
Added one line to the bottom of Views/Shared/_Layout.cshtml
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ajaxify") <=== ADDED THIS LINE
#RenderSection("scripts", required: false)
When I run the web app the home page comes up normally (as expected), but the contact page comes up using the mobile styles. To verify this I made the body yellow in that media selector and sure enough, it kicks in on the Ajaxified (dynamically loaded) About page:
These CSS styles are defined in the CSS within the following selector:
#media only screen and (max-width: 850px)
The page corrects itself if you resize it at all or refresh the browser:
I am surprised that this is possible, as the media selector is meant to be resolution dependant, so thought I would see if anyone can shed light on the cause. The browser window is greater than 850px at all times so the mobile styles should not be shown at all.
The Actual Question Is:
To avoid further confusion the actual question is: I need to know why the media filter selector is triggering, even though the screen is bigger than the min size specified?
Update:
I reduced the Standard MVC4/Razor CSS mobile styles section to the minimum below and the problem still exists. If I removed the float: none, the problem does not occur:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
body{
background-color: yellow;
}
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
}
As the details provided, I will say the problem is with float only,
Just update float and one more tag
.header .float-left{float:left;}
.header .float-right{float:right;}
.clearfix{clear:both}
Use this clearfix class with div below header div
<div class="header">
//your codes
</div>
<div class="clearfix"></div>
I think this will do..
Edit : Ajaxify Update,
The script file of ajaxify has this code,
// Prepare Variables
var contentSelector = '#content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
activeClass = 'active selected current youarehere',
activeSelector = '.active,.selected,.current,.youarehere',
menuChildrenSelector = '> li,> ul > li',
completedEventName = 'statechangecomplete',
/* Application Generic Variables */
$window = $(window),
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
Now for clarification the CSS you have specified is not clashing with the CSS changed by ajaxify.js so there must be something that you are missing, I will say that AJAXIFY.js is not the one who is changing behavior of page, please post live link of your page or total work for more details.
Update: Large Razor Site.
If you have ajaxify large razor project, that will not change the behavior; Yes, it prepares strong html objects in MVC4 so if there is some standard ignores in the razor code or html page code or master page code. this will occur, I will stay with My Vote that Ajaxify does not change the behavior, its something else that is classifies under mobile site.
Update : Removing float
Removing float:none helps --> that prov that this is a float issue, that has not been taken care before this node..
I will like to add that simplify CSS to base page/master page which are commonly used, as the ajaxify calls the page and if the CSS of that razor page is not loaded then also this problem occur.

Why does my content shift when I reload the page?

So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.
I added this css:
#canvas { top: 0 !important; margin-top: 0 !important;}
and this HTML
<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>
When you first load the page, you have a div (with ID something like "yui_3_10_1_1_1376940471763_412") that has no inline styling. So everything looks fine.
When you reload the page, that div no longer has an ID, and instead has an inline top margin added to it, apparently by Javascript, which pushes your site down.
Meanwhile, your code makes no sense. You've applied CSS to the div with id="canvas", and then used Javascript to remove that id, giving your CSS nothing to apply to.
Having removed that, your page is also throwing a JS error because a SquareSpace function in site.js is looking for the IDs you've deleted.
I'd try removing your added JS (leaving "canvas" and "canvas-wrapper" intact). Your CSS (with the "!important" tags) should override any inline styling that SquareSpace adds.

Expand DIV vertically that contains an iFrame

http://jsfiddle.net/fJkBU/1/
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one
origin from getting or setting properties of a document from another
origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?
If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.
I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.
Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!
Call the below Javascript function in Iframe onload event.
function autoResize(id)
{
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (newheight) + "px";
}
e.g:
<iframe id="commentIframe" onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.
Change:
id='commentLoader'
to:
id="commentLoader"

Facebook Like Button Align Text In Iframe to the right

I'm using the facebook like button on my site, via an iframe.
Now you have to specify a width of the iframe. Due to various languages of the like button, this means that I have to set the width to at least 70px.
Now i want the like button to be aligned to the far right of my site, now i can do this by adding "text-align:right" in the css style of the iframe. The iframe shows on the right, but not all the way on the right.
This happens because of the iframe width, its 70px, and for example the english like button is only 55px.
Now what i want: To align the actual content of the iframe to the right of the actual iframe.
http://pastehtml.com/view/1dnwtbh.html
Here i have build an example. Its aligned on the right of the div ive build, but because the iframe is larger than the actual like button, its not perfectly aligned to the right. I want to like button to be aligned to the right in the iframe.
I hope you guys can help
css rules only apply to the iframe element, not the contents of the iframe, because it is another webpage entirely.
You 'might' be able to use javascript to add a css stylesheet to the iframe page with:
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.head.appendChild(cssLink);
But I'm not sure if that will work on all browsers.
Your best bet is to call the page with AJAX.
That way you can modify the contents of the page before you display it
An example jquery AJAX function might look like this:
$.ajax({
type: "GET",
url: "facebookURL",
dataType: "html",
success: function(html) {
processData(html);
}
});
function processData(fbData) {
$('#injectFBLikeHere').html(function() {
return $(fbData).find('#LikePluginPagelet').html();
});
}
Note I haven't test this, only use it as a starting point or a guide
Modifying the contents of an iFrame is typically impossible by modern web standards : http://en.wikipedia.org/wiki/Cross-site_scripting
Because you cannot determine the width of the like button inside of the iframe, you can't resize the iframe to the minimum width to be nested on the right.
The only way I can think of is resizing the iframe, but as you said, you need it to support multiple languages, which I guess then if you used javascript to detect the user's language ( JavaScript for detecting browser language preference ). You might be able to manually style the like button's iframe width depending on the language. I can't think of any automated way to do this, due to cross site scripting.
Here is what to do.
Insert a DIV called #like before you tag, then Put your Facebook code inside as shown below
<div id="like">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like
Now create the #like CSS that you applied to the above DIV as shown below and adjust as needed.
/* CSS for Facebook like*/
#like {
position: fixed;
top: 300px;
right: -20px;
float: right;
height: auto;
width: 130px;
}
Note: remove any previous CSS that you applied to the i-frame so it doesn't conflict with this one.
Maybe this will work for you:
when you generate code here, set the width to 0.
Like this? http://d.pr/Cbkd
If so, here's what I did via Firebug
.connect_widget_number_cloud,
.connect_widget_connect_button {float: right !important;}
I also changed the iframe width to something like 60px.

How to dynamically show/hide a style sheet inside a content control?

I have a master page with a contentplaceholder control inside the head tag so that I can easily add any contents to the head tag (like link tags, styles, scripts .. etc) from the content pages.
Now, on one of the content pages, I have a style sheet (inline, ie. inside a style tag, not linked with a link tag) that I want to show/hide depending on the state of the page (the page works like a wizard using a multiview control on the page). I tried to wrap the stylesheet inside a placeholder control with Visible = false, then set Visible to true in the code but that didn't work, the style tag is not rendered in the html. I removed the placeholder control and added runat="server" directly to the style tag but that didn't work too.
The reason I keep the styles hidden in the first place is that they contain formatting placeholders, ie. {0}, {1} ..etc, which I replace in the code behind before showing the stylesheet. I don't want to send the styles to the client with these placesholders. To make it clearer, the styles look similar to this:
<asp:placeholder ID="_stylesPlaceHolder" runat="server" Visible="false">
<style type="text/css">
#elementid
{
width: {0}px;
height: {0}px;
overflow: hidden;
position: relative;
}
#elementid2
{
position: absolute;
width: {1}px;
height: {2}px;
top: {3}px;
left: {4}px;
}
.. and so on
</style>
</asp:placeholder>
I could try to add the styles dynamically from the code behind page (using Page.Header.StyleSheet.CreateStyleRule for example) but I prefer to keep them in the .aspx file for the sake of separating the html from the code and also to make it easier to change the styles with no dynamic values.
Thanks
OK, now I finally got it. First of all it's nothing wrong with ASP.NET. I was testing with google Chrome when I posted the question. As I indicated in my comment above, I tested with FireFox afterwards and found the style tag was actually there.
I checked again in Chrome but this time I checked in the code inspector instead of the page source, the style tag is also there. Chrome didn't like the style tag with the placeholders (I was testing so I still didn't replace the placeholders) and decided to hide it from the page source view and push it under the rug! Good boy!!

Resources