This is a migrated thread and some comments may be shown as answers.

Panel varies in browsers

1 Answer 39 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Dorababu
Top achievements
Rank 1
Dorababu asked on 25 May 2012, 05:17 PM
Hi all I have designed my page using Tabstrip and Panel as follows

<%@ 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">
<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

Sort by
0
Accepted
Kate
Telerik team
answered on 29 May 2012, 12:30 PM
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
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.
Tags
PanelBar
Asked by
Dorababu
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or