In Telerik MVC grid.
for Master Detail it give a Triangle icon(when we click it. it expands the grid and show the Details).
Can we have a custom icon instead of triangle icon.
I can change the image on the image folder but it will change through out the application.
I want it to change only for one page.
Any idea?
You can change the CSS background-image like this:
<style>
.t-hierarchy-cell .t-minus
{
backgorund-image: url("path_to_new_expand_icon");
}
.t-hierarchy-cell .t-plus
{
backgorund-image: url("path_to_new_collapse_icon");
}
</style>
Related
I have frond end built using angularjs. I have declared the background image for body of the index.html page (its same for whole website).
whenever I go to the new url, a view will be displayed in ng-view. currently I am planning to change the background of only login page.
Whenever i go to the url localhost:3000/login, background (of body) should change for only that page. for rest of the page it should remain same.
Is there anyway to do it?
Edit: Right now I have this code in my app.scss
body {
padding-bottom: 15px;
#include background-image(linear-gradient(#c3c3c3, white 350px));
}
And its common for all the pages. When i load the login page, still this background styling will be displayed(which is inherited). Which I want to remove (background: none) for only login page. Hope it clarifies my question.
Try:
changing it in the CSS file
changing the
ng-style="{'backgroundimage':'url(typeUrlHere)'}"> inside the desired tag.
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.
I am using a Wordpress theme named KALLYAS, and I am having trouble adding CSS to a specific class. This theme uses multiple shortcodes. So lets say I want to add a background with CSS to the gray area on the homepage only WITHOUT EFFECTING THE GRAY AREA ON ANY OTHER PAGE. also how would I go about adding CSS to a shortcode on a specific page aswell? I am guessing it is same way.
That worked because if you notice on the code in the theme preview it says :
<body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true">
it would also work if you used any of them like :
.page-id-17 .greyarea { color:#ccc }
.home.page-id-17 .greyarea { color:#ccc }
You need to scope your CSS if you want it to just display on one page. Grab a unique class or ID from a parent on that page, and place that in front of your css selector.
Ex
.uniqueClass .greyarea { color:#ccc }
The default icon in the tree view (using gallery-yui-treeview) is a folder icon with an arrow or a page icon . I want to change this to a plus/minus sign. I guess something needs to be done to the skin used but I am not able to figure out what and how. Please help.
Look at this page about YUI skinning : http://yuilibrary.com/yui/docs/tutorials/skins/
Create your own sprite with the folder you want to display (default is : tree_view_icons_blue_01_arrow_beside_folders.gif )
Then, override the span displaying the folder like this :
<style>
.yui3-treeview-label-content{
background-image: url("my_new_folder_sprite.png");
}
</style>
Is there a simple way to change the default colors of controls in asp.net (VS2010). Specifically, every time a textbox is moused over or a submit button is clicked, they get light blue highlights or borders. This was fine until I made a light green site. Now it really does not match at all. Is there one simple place in VS2010 I can change this default color to green?
Thanks for any help....and yes I'm a noob!
Use CSS
If you're using a master page, just setup a default styles css file in the master page and set all of your css styles there, such as input, p, a, input[type="submit"], etc.
If you're not using a master page, define these in the .aspx pages
Here's a link to a CSS tutorial: http://www.w3schools.com/css/
If you don't provide CSS information for the controls in either a stylesheet, style tag or inline styles, then they will use the CSS as defined by the browser that you are using.
With that out of the way, you can style your controls in CSS based on their type:
input { ... }
input[type="text"] { ... }
input[type="submit"] { ... }