Hi all I have designed my page using Tabstrip and Panel as follows
This works fine in mozila but when coming to Chrome I am unable to view the exact view which I had in Mozila can some one help me.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="addEmployee.aspx.cs" Inherits="addEmployee" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link href="TabStrip.Vista.css" rel="stylesheet" type="text/css" /> <link href="PanelBar.Office2010Silver.css" rel="stylesheet" type="text/css" /> <link href="PanelBar.Vista.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> <link href="ComboBox.Office2010Silver.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadTabStrip1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" UnSelectChildren="True" Skin="Vista" EnableEmbeddedSkins="false" ClickSelectedTab="True" AutoPostBack="True" SelectedIndex="0"> <Tabs> <telerik:RadTab runat="server" Text="Personal" Selected="True" PageViewID="RadPageView1"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Racing" PageViewID="RadPageView5"> <Tabs> <telerik:RadTab Text="Running" PageViewID="RadPageView6" /> <telerik:RadTab Text="Swimming" PageViewID="RadPageView7" /> <telerik:RadTab Text="Skiing" PageViewID="RadPageView8" /> </Tabs> </telerik:RadTab> <telerik:RadTab runat="server" Text="Gymnastics" PageViewID="RadPageView9"> <Tabs> <telerik:RadTab Text="Vault" PageViewID="RadPageView10" /> <telerik:RadTab Text="Uneven Bars" PageViewID="RadPageView11" /> <telerik:RadTab Text="Balance Beam" PageViewID="RadPageView12" /> </Tabs> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"> <telerik:RadPageView ID="RadPageView1" runat="server"> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem" Skin="Vista" EnableEmbeddedSkins="false" Width="400px"> <Items> <telerik:RadPanelItem Expanded="true" Text="Employee Personal Information" runat="server" Selected="true"> <Items> <telerik:RadPanelItem Value="AccountInformation" runat="server"> <ItemTemplate> <div class="text" style="background-color: #edf9fe"> <ul class="formList" id="accountInfo"> <li> <asp:Label Width="150px" runat="server" ID="lblFirstName" AssociatedControlID="accountName">First Name</asp:Label> <asp:TextBox ID="accountName" CssClass="textInput" runat="server" ValidationGroup="accountValidation" Width="200px"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ID="rqrdName" ValidationGroup="accountValidation" ControlToValidate="accountName" ErrorMessage="First name is required" Text="*"></asp:RequiredFieldValidator> </li> <li> <asp:Label runat="server" Width="150px" ID="lblMiddle" AssociatedControlID="txtMiddle">Middle Initial</asp:Label> <asp:TextBox ID="txtMiddle" CssClass="textInput" runat="server" Width="200px"></asp:TextBox> </li> <li> <asp:Label runat="server" Width="150px" ID="lblLastName" AssociatedControlID="txtLastName">Last Name</asp:Label> <asp:TextBox CssClass="textInput" ValidationGroup="accountValidation" ID="txtLastName" runat="server" Width="200px"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ValidationGroup="accountValidation" ID="rqrdLast" ControlToValidate="txtLastName" ErrorMessage="LastName is required" Text="*"></asp:RequiredFieldValidator> </li> <li> <asp:Label runat="server" ID="lblSSN" AssociatedControlID="txtSSN" Width="150px">Social Security Number</asp:Label> <telerik:RadMaskedTextBox Mask="###-##-####" runat="server" ID="txtSSN" Width="200px" ValidationGroup="accountValidation"> </telerik:RadMaskedTextBox> <asp:RequiredFieldValidator runat="server" ValidationGroup="accountValidation" ID="rqrdSSN" ControlToValidate="txtSSN" ErrorMessage="SSN is required" Text="*"></asp:RequiredFieldValidator> </li> <li> <asp:Label runat="server" ID="lblHireDate" AssociatedControlID="radDtHiredate" Width="150px">Hire Date</asp:Label> <telerik:RadDatePicker ID="radDtHiredate" Width="200px" runat="server" MinDate="1900-01-01" AutoPostBack="true"> <Calendar ID="calHire" RangeMinDate="1900-01-01" runat="server"> </Calendar> </telerik:RadDatePicker> </li> <li> <asp:Label runat="server" ID="lblGender" AssociatedControlID="RadComboBox1" Width="150px">Gender</asp:Label> <telerik:RadComboBox ID="RadComboBox1" AutoPostBack="true" CssClass="ComboBox" runat="server" Width="200px"> </telerik:RadComboBox> </li> <li> <asp:Label runat="server" ID="lblDob" AssociatedControlID="radDtDOB" Width="150px">Date Of Birth</asp:Label> <telerik:RadDatePicker ID="radDtDOB" Width="200px" runat="server" MinDate="1900-01-01" AutoPostBack="true"> <Calendar ID="calDob" RangeMinDate="1900-01-01" runat="server"> </Calendar> </telerik:RadDatePicker> </li> <li> <asp:Label runat="server" ID="lblPayFrequency" AssociatedControlID="radPayFrequency" Width="150px">Pay Frequency</asp:Label> <telerik:RadComboBox ID="radPayFrequency" AutoPostBack="true" CssClass="ComboBox" runat="server" Width="200px"> </telerik:RadComboBox> </li> </ul> <br /> <asp:ValidationSummary runat="server" ID="validationSummary" CssClass="validationSummary" /> <br /> <br /> </div> </ItemTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelItem> </Items> </telerik:RadPanelBar> </telerik:RadAjaxPanel> </telerik:RadPageView> <telerik:RadPageView ID="RadPageView2" runat="server"> <h3 class="title"> Court sports: Tennis</h3> Tennis is a sport played between two players (singles) or between two teams of two players each (doubles). Each player uses a strung racquet to strike a hollow rubber ball covered with felt (most of the time Optic Yellow, but can be any color or even two-tone) over a net into the opponent's court. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView3" runat="server"> <h3 class="title"> Court sports: Badminton</h3> Badminton is a racquet sport played by either two opposing players (singles) or two opposing pairs (doubles), who take positions on opposite halves of a rectangular court that is divided by a net. Players score points by striking a shuttlecock with their racquet so that it passes over the net and lands in their opponents' half of the court. A rally ends once the shuttlecock has struck the ground, and the shuttlecock may only be struck once by each side before it passes over the net. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView4" runat="server"> <h3 class="title"> Court sports: Squash</h3> Squash is a racquet sport that was formerly called squash racquets, a reference to the "squashable" soft ball used in the game (compared with the harder ball used in its parent game Racquets (or rackets; see below)). The game is played by two players (or four players for doubles) with "standard" rackets in a four-walled court with a small, hollow rubber ball. Squash is characterized as a "high-impact" exercise that can place strain on the joints, notably the knees. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView5" runat="server"> <h3 class="title"> Racing sports</h3> <ul> <li>Human-powered: running (many types), swimming (many types), skiing (many types), ice speed skating</li> <li>Human-assisted: cycling (several types), rowing, canoeing, kayaking, dragon boat racing, wheelchair racing, bobsledding and luge</li> <li>Animal and animal-assisted: horse racing (several types), greyhound racing, pigeon racing, dog racing, chariot racing</li> <li>Machine-powered: auto racing (many types), motorboat racing, motorcycle racing (many varieties), air racing</li> </ul> </telerik:RadPageView> <telerik:RadPageView ID="RadPageView6" runat="server"> <h3 class="title"> Racing sports: Running</h3> Running is both a competition and a type of training for sports which have running or endurance components. As a sport it is split into events divided by distance and sometimes includes permutations such as the obstacles in Steeplechase and hurdles. Running races are contests to determine which of the competitors is able to run a certain distance in the shortest time. Today, competitive running events make up the core of the sport of athletics. Events are usually grouped into several classes, each requiring substantially different athletic strengths and involving different tactics, training methods, and types of competitors. <br /> Running competitions have probably existed for most of humanity's history, and were a key part of the ancient Olympic Games as well as the modern Olympics. Today, road racing is a popular sport among non-professional athletes, who included over 7.7 million people in America alone in 2002. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView7" runat="server"> <h3 class="title"> Racing sports: Swimming</h3> The goal of competitive swimming is to be the fastest over a given distance. Competitive swimming became popular in the nineteenth century, and comprises 36 individual events - 18 male events and 18 female events, however the IOC only recognizes 34 events - 17 male and 17 female events. Swimming is an event at the Summer Olympic Games, where male and female athletes compete in 13 of the recognized events each. Olympic events are held in a 50 meter pool. Competitive swimming's international governing body is FINA (Fédération Internationale de Natation), the International Swimming Federation.<br /> The four competitive strokes are the butterfly, backstroke, breaststroke, and front crawl (freestyle). "Freestyle" and "front crawl" are often used interchangeably, but "freestyle" properly refers to an unregulated competitive event rather than to any particular stroke. Swimmers generally choose to swim front crawl in a freestyle event since it is the fastest stroke. In events that require specific strokes, disqualification will occur if the stroke is not swum correctly, for example if the swimmer does not touch the wall with two hands during breaststroke or butterfly. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView8" runat="server"> <h3 class="title"> Racing sports: Skiing</h3> Snow skiing is a group of sports utilizing skis as primary equipment. Skis are used in conjunction with boots that connect to the ski with use of a binding. Although snowboarding shares the general characteristics of skiing sports, it evolved from surfing and skateboarding and so is not considered a type of skiing. The posture assumed in snowboarding is a side on action whereas the skiing posture is primarily front facing.<br /> Skiing can be grouped into two general categories. Nordic skiing is the oldest category and includes sport that evolved from skiing as done in Scandinavia. Nordic style bindings attach at the toes of the skier's boots, but not at the heels. Alpine skiing includes sports that evolved from skiing as done in the Alps. Alpine bindings attach at both the toe and the heel of the skier's boots. As with many disciplines, such as Telemark skiing, there is some crossover. However, binding style and history tend to dictate whether a style is considered Nordic or Alpine. Thus, in view of its lack of a locking heel, and its roots in Telemark, Norway, Telemark is generally considered a Nordic discipline. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView9" runat="server"> <h3 class="title"> Gymnastics</h3> Gymnastics is a sport involving performance of exercises requiring physical strength, agility and coordination. Artistic Gymnastics is the best known and most popular of the gymnastics sports governed by the Fédération Internationale de Gymnastique (FIG). It typically involves exercises on uneven bars, balance beam, floor exercise, and vault (for women), and high bar, parallel bars, still rings, floor exercise, vault, and pommel horse (for men). It evolved from exercises used by the ancient Greeks, including skills for mounting and dismounting a horse, and circus performance skills. Other forms of gymnastics are rhythmic gymnastics, various trampolining sports and aerobic and acrobatic gymnastics. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView10" runat="server"> <h3 class="title"> Gymnastics: Vault</h3> In the vaulting events gymnasts: sprint down a 25 meter (about 82 feet) runway, jump onto a beatboard - a kind of springboard, (run/ take-off segment), land momentarily, generally inverted on the hands, on the vaulting horse or vaulting table, (pre flight segment), then spring or block off of this platform to a two footed landing (post flight segment). The post flight segment may include one or more multiple saltos or somersaults, and or twisting movements. In 2001, the traditional vaulting horse was replaced with a new apparatus, sometimes known as a tongue or table. The new apparatus is more stable, wider, and longer than the older vaulting horse - approx. 1m in length and 1m in width, gives gymnasts a larger blocking surface, and is therefore safer than the old vaulting horse. With the addition of this new, safer vaulting table, gymnasts are attempting more difficult and dangerous vaults. </telerik:RadPageView> <telerik:RadPageView ID="RadPageView11" runat="server"> <h3 class="title"> Gymnastics: Uneven Bars</h3> On the uneven bars (also known as asymmetric bars, UK), the gymnast navigates two horizontal bars set at different heights. The height is generally fixed, but the width may be adjusted. Gymnasts perform swinging, circling, transitional, and release moves,that may pass over, under, and between the two bars. Movements may pass through the handstand. Gymnasts often mount the Uneven Bars using a beatboard (springboard). </telerik:RadPageView> <telerik:RadPageView ID="RadPageView12" runat="server"> <h3 class="title"> Gymnastics: Balance Beam</h3> The gymnast performs a choreographed routine from 60 to 80 seconds in length consisting of leaps, acrobatic skills, somersaults, turns and dance elements on a padded sprung beam. Apparatus norms set by the International Gymnastics Federation (used for Olympic and most elite competitions) specify the beam must be 125 cm (4' 1") high, 500 cm (16' 5") long, and 10 cm (4") wide. The event requires in particular, balance, flexibility and strength. </telerik:RadPageView> </telerik:RadMultiPage> <div> </div> </form></body></html>This works fine in mozila but when coming to Chrome I am unable to view the exact view which I had in Mozila can some one help me.
1 Answer, 1 is accepted
0
Accepted
Hello Dorababu,
With ExpandMode set to FullExpandedItem you will also need to set height to the RadPanelBar control so that the PanelItems can take the predefined height. In this case you can either explicitly set height that will be applied to all of the PanelItems or set a different expand mode (to either SingleExpandedItem or MultipleExpandedItems) so that the PanelItems expand according to their content. Please take a look at the following help article where you will find more detailed explanation on the expand modes of the control:
http://www.telerik.com/help/aspnet-ajax/panelbar-displaying-child-items.html
Kind regards,
Kate
the Telerik team
With ExpandMode set to FullExpandedItem you will also need to set height to the RadPanelBar control so that the PanelItems can take the predefined height. In this case you can either explicitly set height that will be applied to all of the PanelItems or set a different expand mode (to either SingleExpandedItem or MultipleExpandedItems) so that the PanelItems expand according to their content. Please take a look at the following help article where you will find more detailed explanation on the expand modes of the control:
http://www.telerik.com/help/aspnet-ajax/panelbar-displaying-child-items.html
Kind regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.