Panel varies in browsers

2 posts, 1 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 25 May 2012 Link to this post

    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.
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top