Customize SharePoint:FormFields to a specific height - css

I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
style> .ms-long{width:100px;} </style>
but that changes every SharePoint:FormField size, not just one.
Any help would be great! Thanks!

I've done this before using jQuery. With jQuery you can query dom elements (ie. fields) by an attribute of your choice (e.g. the attribute title) and the manipulate it. See Jan Tielens Series about integrating SharePoint and jQuery. http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx
Or just google sharepoint + jquery.

Related

Full Calendar/Angular - Handle date cell content when rendering

I'm using the full-calendar component for Angular and I want to customize the content of each date cell according to different conditions. For example if the date is invalid (I have a function that validates the date), I want to change the date's cell background color. Otherwise, if its valid I want to add a plus button inside to add events. Besides that I want to add custom animations and hover effects.
How can I take control of the date is being render ?
I manage to change the background color with dayCellDidMount hook:
dayCellDidMount: (arg) => {
if(!this.dateIsValid(arg.date, arg.isPast)){
arg.el.style.backgroundColor = "#eeeeee";
}
},
I don't think that's the best way to do it and I still can't manage to add the plus button inside the cell.
Can someone achieve this or something similar? Your help would be appreciated, thanks.
If you know another calendar to integrate with Angular that has this features I'm open to suggestions.

How to set control properties in css?

Is there a way to set this kind of properties in css?
So I can use the same calendar and be more organized with my code
<asp:Calendar ID="Calendar1" runat="server" Height="189px" CssClass="Calendar"
ondayrender="CalendarRender" TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White" ShowGridLines="true" TitleStyle-BorderStyle="Solid" TitleStyle-BorderWidth="1px" TitleStyle-BorderColor="Black" SelectedDayStyle-ForeColor="#281dc9" SelectedDayStyle-Font-Bold="true" DayHeaderStyle-BorderColor="Black" DayHeaderStyle-BorderWidth="1px" DayHeaderStyle-BorderStyle="Solid"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
Assuming you're talking about properties such as:
TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White"
... etc..
Your best bet would be to render the calendar to a page, check its source and see what style it adds. You can then extract this out for use in CSS.
UPDATE
This page has some of the selector names for you, along with what they control ASP.Net Calendar Control Custom Theme Format using CSS
If you want to be more organized, and don't want your project to become like 'spaghetti' in future, use CSS file for css properties. Do not embed this properties in headers, unless this is the only way to solve current issue. This is bad for you, and for all who will work with your project.
I've met lot of legacy projects, wasting too much time to find why some dom element's behaviours differs from what I need.
Just specify CssStyle property in your aspx markup, and it will be mapped to real css class.
And add description for this class in css file.

ASP.Net Good ToolTip for a GridView?

I search a Script / Expansion / Way to have a tooltip like this:
http://s3.imgimg.de/uploads/Untitled37105acbpng.png
That means:
- it must be easy to handle within GridViews (specially in RowBound-Events, so every Row will have a own Tooltip for a coloum).
- Must be have the option for delay when hover over the item (I don't like the default ASP.ToolTip because you can't set the delay down!)
Hoe you have an idea :)
You could use f.e. this jQuery plugin.
Here are some links to get started:
Using jQuery To Create Stunning Tooltips in your ASP.NET Applications
Displaying-Row-Details-Tooltip-on-GridView-using-JQuery

Applying Custom Style to ASP.Net Calendar control

I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.

How to display changing data in XUL

I'm trying to build a firefox extension which can get rss feeds and display them in a popup panel. But I'm not aware about how to display feeds in a panel(I know how to display static text).Because the feed is varying all the time.
Any help regarding this matter will be appreciated.
Thanks in advance.
How about using setInterval to call a function that redraws the panel at the time interval you specify?
You can create DOM elements inside a XUL popup panel using JavaScript, but you have to remember that the panel requires the XHTML namespace:
<panel id="your-id" noautohide="true" xmlns:html="http://www.w3.org/1999/xhtml">
and instead of using:
document.createElement("p"); //for example
you would need to use:
document.createElementNS("http://www.w3.org/1999/xhtml","html:p");
You can get the popup reference by id and just create and append elements as you need them. Then the following might help:
https://developer.mozilla.org/en/XUL/PopupGuide/OpenClose:

Resources