Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How do I adjust icon position in HeaderTemplate

5 Answers 86 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Helen
Top achievements
Rank 1
Helen asked on 27 Mar 2015, 03:47 PM
panels.png
Hi,

I know this is probably something really simple, but I can't get it to work. I'm trying to add icons to the HeaderTemplate and make them right justified. I used span and div tags but they seem to push the icons down into the content area.

Here's my asp page:

<head id="Head1" runat="server">
    <title></title>
    <link href="CustomSkin/PanelBar.Salt.css" rel="stylesheet" />
     
    <style type="text/css">
        .RadPanelBar_Salt a.rpLink.GreenPanel.rpExpandable.rpExpanded {
            background-color: green;
            background-position: 0 -1000px;
            border-color: green;
        }
    </style> 
     
</head>
<body>
     
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
       <%--<telerik:RadButton runat="server" Text="Preview Report" ></telerik:RadButton>--%>
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  ExpandMode="MultipleExpandedItems"  Skin="Salt" EnableEmbeddedSkins="false"  >  
            <CollapseAnimation Duration="100" Type="None" /> 
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" CssClass="GreenPanel"  >
                    <HeaderTemplate>
                          Root Item 1
                            <asp:ImageButton ID="image1" runat="server"  ImageUrl="~/images/save_go16x16.png" /><asp:ImageButton ID="ImageButton1" runat="server"  ImageUrl="~/images/ie_16x16.png" />
                           <a class="rpExpandable">
                               <span class="rpExpandHandle"></span>
                           </a>
                    </HeaderTemplate>                      
                    <ContentTemplate>
                        <telerik:RadTextBox ID="textbox1" runat="server" Text="text 1"></telerik:RadTextBox>
                        <telerik:RadComboBox runat="server" ID="RadComboBox1" Text="combo1"></telerik:RadComboBox>
                    </ContentTemplate>
                     
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2" CssClass="GreenPanel" >  
                    <HeaderTemplate>
                        Root Item 2<asp:ImageButton ID="ImageButton2" runat="server"  ImageUrl="~/images/save_go16x16.png"  />
                           <a class="rpExpandable">
                               <span class="rpExpandHandle"></span>
                           </a>
                    </HeaderTemplate>
                    <ContentTemplate>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Text="Root Panel 2"></telerik:RadTextBox>
                        <telerik:RadComboBox runat="server" ID="RadComboBox2" Text="combo2"></telerik:RadComboBox>
                    </ContentTemplate>
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3" CssClass="GreenPanel" >  
                    <HeaderTemplate>
                        Root Item 3<asp:ImageButton ID="ImageButton3" runat="server"  ImageUrl="~/images/save_go16x16.png"  />
                           <a class="rpExpandable">
                               <span class="rpExpandHandle"></span>
                           </a>
                    </HeaderTemplate>
                    <ContentTemplate>
                        <telerik:RadTextBox ID="RadTextBox3" runat="server" Text="Root Panel 3"></telerik:RadTextBox>
                        <telerik:RadComboBox runat="server" ID="RadComboBox3" Text="combo3"></telerik:RadComboBox>
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items> 
            <ExpandAnimation Duration="100" Type="None" /> 
             
        </telerik:RadPanelBar> 
    </form>
</body>
</html>

I also attached what my screen looks like.

Thank you,

Helen

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 31 Mar 2015, 09:38 AM
Hi Helen,

I have run the code that you had provided, but the result is different. Could you please provide also the custom CSS that you are applying to the PanelBar?

Regards,
Magdalena
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Helen
Top achievements
Rank 1
answered on 31 Mar 2015, 01:55 PM
.RadGrid_SALT {
  border: 1px solid #a5b3c5;
  background: #fcfcfc;
  color: #000;
  font-size: 12px;
  line-height: 16px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
  .RadGrid_SALT .rgMasterTable, .RadGrid_SALT .rgDetailTable, .RadGrid_SALT .rgGroupPanel table, .RadGrid_SALT .rgCommandRow table, .RadGrid_SALT .rgEditForm table, .RadGrid_SALT .rgPager table {
    font-size: 12px;
    line-height: 16px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
  .RadGrid_SALT .rgInput {
    background-color: white;
    border: 1px solid #b8cbde;
    color: black; }
 
.GridToolTip_SALT {
  font-size: 12px;
  line-height: 16px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
 
.RadGrid_SALT .rgHeader:first-child, .RadGrid_SALT th.rgResizeCol:first-child, .RadGrid_SALT .rgFilterRow > td:first-child, .RadGrid_SALT .rgRow > td:first-child, .RadGrid_SALT .rgAltRow > td:first-child {
  border-left-width: 0;
  padding-left: 8px; }
.RadGrid_SALT .rgSave, .RadGrid_SALT .rgAdd, .RadGrid_SALT .rgRefresh, .RadGrid_SALT .rgEdit, .RadGrid_SALT .rgDel, .RadGrid_SALT .rgFilter, .RadGrid_SALT .rgPagePrev, .RadGrid_SALT .rgPageNext, .RadGrid_SALT .rgPageFirst, .RadGrid_SALT .rgPageLast, .RadGrid_SALT .rgExpand, .RadGrid_SALT .rgCollapse, .RadGrid_SALT .rgSortAsc, .RadGrid_SALT .rgSortDesc, .RadGrid_SALT .rgUpdate, .RadGrid_SALT .rgCancel, .RadGrid_SALT .rgUngroup, .RadGrid_SALT .rgExpXLS, .RadGrid_SALT .rgExpDOC, .RadGrid_SALT .rgExpPDF, .RadGrid_SALT .rgExpCSV {
  background-image: url('Grid/sprite.gif'); }
.RadGrid_SALT .rgHeaderDiv {
  background: #f1f5fb; }
.RadGrid_SALT .rgHeaderDiv {
  border-right-color: #b8cbde; }
.RadGrid_SALT .rgHeader, .RadGrid_SALT th.rgResizeCol, .RadGrid_SALT .rgHeaderWrapper {
  border: 1px solid;
  border-color: #f6f9fb #fff #c2cedb #e1eaf3;
  border-top-width: 0;
  background: #f1f5fb; }
.RadGrid_SALT .rgMultiHeaderRow th.rgHeader, .RadGrid_SALT .rgMultiHeaderRow th.rgResizeCol {
  border: 1px solid;
  border-color: #f6f9fb #fff #c2cedb #e1eaf3;
  border-top-width: 0;
  background: #f1f5fb; }
.RadGrid_SALT th.rgSorted {
  background: 0 -2600px repeat-x #dde8f7 url('Grid/sprite.gif'); }
.RadGrid_SALT .rgHeader {
  color: #4c607a; }
  .RadGrid_SALT .rgHeader a {
    color: #4c607a; }
.RadGrid_SALT .rgRow td, .RadGrid_SALT .rgAltRow td, .RadGrid_SALT .rgEditRow td, .RadGrid_SALT .rgFooter td {
  border-style: solid;
  border-width: 0 1px 1px; }
.RadGrid_SALT .rgRow {
  background-color: #ebeff3; }
  .RadGrid_SALT .rgRow td {
    border-color: #ebeff3; }
.RadGrid_SALT .rgAltRow td {
  border-color: #fff; }
.RadGrid_SALT .rgRow .rgSorted, .RadGrid_SALT .rgAltRow .rgSorted {
  background-color: #e5ecf5;
  border-color: #e5ecf5; }
.RadGrid_SALT .rgSelectedRow .rgSorted, .RadGrid_SALT .rgActiveRow .rgSorted, .RadGrid_SALT .rgHoveredRow .rgSorted, .RadGrid_SALT .rgEditRow .rgSorted {
  background-color: transparent; }
.RadGrid_SALT .rgRow a, .RadGrid_SALT .rgAltRow a, .RadGrid_SALT .rgEditRow a, .RadGrid_SALT .rgFooter a, .RadGrid_SALT .rgEditForm a {
  color: #1e3287; }
.RadGrid_SALT .rgMasterTable .rgSelectedCell, .RadGrid_SALT .rgSelectedRow {
  background: #d7e8fe 0 -3900px repeat-x url('Grid/sprite.gif'); }
 
/*header*/
/*rows*/
* + html .RadGrid_SALT .rgSelectedRow .rgSorted, * html .RadGrid_SALT .rgSelectedRow .rgSorted {
  background-color: #d7e8fe; }
 
.RadGrid_SALT .rgMasterTable .rgActiveCell, .RadGrid_SALT .rgActiveRow, .RadGrid_SALT .rgHoveredRow {
  background: yellow 0 -2900px repeat-x url('Grid/sprite.gif'); }
 
* + html .RadGrid_SALT .rgActiveRow .rgSorted, * + html .RadGrid_SALT .rgHoveredRow .rgSorted {
  background-color: yellow; }
* html .RadGrid_SALT .rgActiveRow .rgSorted, * html .RadGrid_SALT .rgHoveredRow .rgSorted {
  background-color: yellow; }
 
.RadGrid_SALT .rgEditRow {
  background: #e6f0fd 0 -4900px repeat-x url('Grid/sprite.gif'); }
 
* + html .RadGrid_SALT .rgEditRow .rgSorted, * html .RadGrid_SALT .rgEditRow .rgSorted {
  background-color: #e6f0fd; }
 
.RadGrid_SALT .rgSelectedRow td, .RadGrid_SALT .rgActiveRow td, .RadGrid_SALT .rgHoveredRow td, .RadGrid_SALT .rgEditRow td {
  border-left-width: 0;
  border-right-width: 0;
  padding-left: 8px;
  padding-right: 8px; }
.RadGrid_SALT .rgSelectedRow td, .RadGrid_SALT .rgSelectedRow .rgSorted {
  border-bottom-color: #8daed5; }
.RadGrid_SALT .rgActiveRow td, .RadGrid_SALT .rgActiveRow .rgSorted {
  border-bottom-color: #a8d8eb; }
.RadGrid_SALT .rgHoveredRow td, .RadGrid_SALT .rgHoveredRow .rgSorted {
  border-bottom-color: #a8d8eb; }
.RadGrid_SALT .rgEditRow td, .RadGrid_SALT .rgEditRow .rgSorted {
  border-bottom-color: #8daed5; }
.RadGrid_SALT .rgDrag {
  background-image: url('Grid/rgDrag.gif'); }
.RadGrid_SALT .rgFooterDiv, .RadGrid_SALT .rgFooter, .RadGrid_SALT .rgFooterWrapper {
  background: #e2eaf4; }
.RadGrid_SALT .rgFooter td, .RadGrid_SALT .rgFooterWrapper {
  border-top-width: 1px;
  border-color: #e2eaf4; }
.RadGrid_SALT .rgPager .rgStatus {
  border: 1px solid;
  border-color: #fcfcfc #c2cedb #f1f5fb #f1f5fb;
  border-left-width: 0; }
.RadGrid_SALT .rgStatus div {
  background-image: url('Common/loading_small.gif'); }
.RadGrid_SALT .rgPager {
  background: #f1f5fb 0 -5900px repeat-x url('Grid/sprite.gif'); }
.RadGrid_SALT td.rgPagerCell {
  border: 1px solid;
  border-color: #fcfcfc #fff #f1f5fb;
  border-right-width: 0; }
.RadGrid_SALT .rgInfoPart {
  color: #5a6779; }
  .RadGrid_SALT .rgInfoPart strong {
    color: #1e395b; }
.RadGrid_SALT .rgPageFirst {
  background-position: 0 -550px; }
  .RadGrid_SALT .rgPageFirst:hover {
    background-position: 0 -600px; }
.RadGrid_SALT .rgPagePrev {
  background-position: 0 -700px; }
  .RadGrid_SALT .rgPagePrev:hover {
    background-position: 0 -750px; }
.RadGrid_SALT .rgPageNext {
  background-position: 0 -850px; }
  .RadGrid_SALT .rgPageNext:hover {
    background-position: 0 -900px; }
.RadGrid_SALT .rgPageLast {
  background-position: 0 -1000px; }
  .RadGrid_SALT .rgPageLast:hover {
    background-position: 0 -1050px; }
.RadGrid_SALT .rgPager .rgPagerButton {
  border-color: #c2cedb;
  background: #dde8f6 repeat-x 0 -1550px url('Grid/sprite.gif');
  color: #1e395b;
  font-size: 12px;
  line-height: 12px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
.RadGrid_SALT .rgNumPart a {
  color: #1e395b; }
  .RadGrid_SALT .rgNumPart a:hover, .RadGrid_SALT .rgNumPart a.rgCurrentPage {
    background: no-repeat url('Grid/sprite.gif'); }
    .RadGrid_SALT .rgNumPart a:hover span, .RadGrid_SALT .rgNumPart a.rgCurrentPage span {
      background: no-repeat url('Grid/sprite.gif'); }
  .RadGrid_SALT .rgNumPart a:hover {
    background-position: 100% -1250px;
    color: #4c607a; }
    .RadGrid_SALT .rgNumPart a:hover span {
      background-position: 0 -1150px; }
  .RadGrid_SALT .rgNumPart a.rgCurrentPage {
    background-position: 100% -1450px;
    color: #4c607a; }
    .RadGrid_SALT .rgNumPart a.rgCurrentPage:hover {
      background-position: 100% -1450px;
      color: #4c607a; }
    .RadGrid_SALT .rgNumPart a.rgCurrentPage span, .RadGrid_SALT .rgNumPart a.rgCurrentPage:hover span {
      background-position: 0 -1350px; }
.RadGrid_SALT .rgHeader .rgSortAsc {
  background-position: 3px -248px;
  height: 10px; }
.RadGrid_SALT .rgHeader .rgSortDesc {
  background-position: 3px -198px;
  height: 10px; }
 
/*footer*/
/*status*/
/*pager*/
/*sorting, reordering*/
.GridReorderTop_SALT {
  height: 11px;
  background: 0 0 no-repeat url('Grid/sprite.gif'); }
 
.GridReorderBottom_SALT {
  height: 11px;
  background: 0 0 no-repeat url('Grid/sprite.gif');
  background-position: 0 -50px; }
 
/*filtering*/
.RadGrid_SALT .rgFilterRow {
  background: #f1f5fb; }
  .RadGrid_SALT .rgFilterRow td {
    border-left: 1px solid #f1f5fb;
    border-right: 1px solid #f1f5fb; }
.RadGrid_SALT .rgFilter {
  background-position: 0 -300px; }
  .RadGrid_SALT .rgFilter:hover {
    background-position: 0 -350px; }
.RadGrid_SALT .rgFilterActive {
  background-position: 0 -400px; }
  .RadGrid_SALT .rgFilterActive:hover {
    background-position: 0 -400px; }
.RadGrid_SALT .rgFilterBox {
  border-color: #b8cbde;
  font: 12px "Segoe UI", Arial, Helvetica, sans-serif;
  color: #000; }
 
.RadMenu_SALT .rgHCMClear, .RadMenu_SALT .rgHCMFilter {
  border-color: #c2cedb;
  background: #dde8f6 center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
  color: #1e395b;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
.RadMenu_SALT .rgHCMClear:hover, .RadMenu_SALT .rgHCMFilter:hover {
  border-color: #c2dbfb;
  background-position: center -67px;
  background-color: #e7edf5; }
 
.RadMenu_SALT_Context .rgFilterApply,
.RadMenu_SALT_Context .rgFilterCancel {
  background-image: url('Common/radGradientButtonSprite.png');
  _background-image: none;
  border-color: #c2cedb;
  color: #1e395b;
  background-color: #dde8f6;
  background-image: linear-gradient(#f4f8fa 0%, #e9f2fb 50%, #dde7f5 50%, #dde8f6 100%);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #1e395b;
  border-color: #d9d9d9 #b8cbde #b8cbde #d9d9d9; }
 
div.RadMenu_SALT_Context .rlbGroup {
  border-color: #bacce3; }
 
.GridContextMenu_SALT .rmLeftImage {
  background-image: url('../Common/Grid/contextMenu.gif'); }
.GridContextMenu_SALT .rgHCMSortAsc .rmLeftImage {
  background-position: 0 0; }
.GridContextMenu_SALT .rgHCMSortDesc .rmLeftImage {
  background-position: 0 -40px; }
.GridContextMenu_SALT .rgHCMUnsort .rmLeftImage {
  background-position: 0 -80px; }
.GridContextMenu_SALT .rgHCMGroup .rmLeftImage {
  background-position: 0 -120px; }
.GridContextMenu_SALT .rgHCMUngroup .rmLeftImage {
  background-position: 0 -160px; }
.GridContextMenu_SALT .rgHCMCols .rmLeftImage {
  background-position: 0 -200px; }
.GridContextMenu_SALT .rgHCMFilter .rmLeftImage {
  background-position: 0 -240px; }
.GridContextMenu_SALT .rgHCMUnfilter .rmLeftImage {
  background-position: 0 -280px; }
 
/*grouping*/
.RadGrid_SALT .rgGroupPanel {
  border: 1px solid;
  border-color: #f2f5fa #f6f9fb #f6f9fb;
  background: #eef3f8 0 -1900px repeat-x url('Grid/sprite.gif'); }
  .RadGrid_SALT .rgGroupPanel td {
    border: 0;
    padding: 0; }
    .RadGrid_SALT .rgGroupPanel td td {
      padding: 2px 3px 1px; }
      .RadGrid_SALT .rgGroupPanel td td td {
        padding: 0; }
  .RadGrid_SALT .rgGroupPanel .rgSortAsc {
    background-position: 4px -144px; }
  .RadGrid_SALT .rgGroupPanel .rgSortDesc {
    background-position: 4px -94px; }
.RadGrid_SALT .rgUngroup {
  background-position: 0 -7200px; }
.RadGrid_SALT .rgGroupItem {
  border: 1px solid #9bc9ff;
  background: #dde8f6 0 -7000px repeat-x url('Grid/sprite.gif'); }
.RadGrid_SALT .rgGroupHeader {
  background: 0 -6489px repeat-x url('Grid/sprite.gif');
  font-size: 1.1em;
  line-height: 21px;
  color: #1e3287; }
  .RadGrid_SALT .rgGroupHeader td {
    padding: 0 8px; }
.RadGrid_SALT .rgExpand {
  background-position: 5px -496px; }
.RadGrid_SALT .rgCollapse {
  background-position: 3px -444px; }
.RadGrid_SALT .rgGroupHeader .rgExpand, .RadGrid_SALT .rgGroupHeader .rgCollapse {
  background-color: #fcfcfc; }
.RadGrid_SALT .rgGroupHeader td p, .RadGrid_SALT .rgGroupHeader td div div {
  background: #fcfcfc; }
.RadGrid_SALT .rgEditForm {
  border-bottom: 1px solid #666; }
.RadGrid_SALT .rgUpdate {
  background-position: 0 -1800px; }
.RadGrid_SALT .rgCancel {
  background-position: 0 -1850px; }
.RadGrid_SALT .rgDetailTable {
  border-color: #a5b3c5; }
.RadGrid_SALT .rgCommandRow {
  background: #e4edf8 0 -2099px repeat-x url('Grid/sprite.gif');
  color: #1e395b; }
.RadGrid_SALT .rgCommandCell {
  border: 1px solid;
  border-color: #fbfdfe #f1f7fc #ebf3fb;
  padding: 0; }
.RadGrid_SALT tfoot .rgCommandCell, .RadGrid_SALT .rgMasterTable > tbody > tr.rgCommandRow .rgCommandCell {
  border-top: 1px solid #c2cedb; }
.RadGrid_SALT .rgCommandTable {
  border: 0; }
  .RadGrid_SALT .rgCommandTable td {
    border: 0;
    padding: 2px 7px; }
.RadGrid_SALT .rgCommandRow a {
  color: #1e395b;
  text-decoration: none; }
.RadGrid_SALT .rgAdd {
  margin-right: 3px;
  background-position: 0 -1650px; }
.RadGrid_SALT .rgRefresh {
  margin-right: 3px;
  background-position: 0 -1600px; }
.RadGrid_SALT .rgEdit {
  background-position: 0 -1700px; }
.RadGrid_SALT .rgDel {
  background-position: 0 -1750px; }
.RadGrid_SALT .rgExpXLS, .RadGrid_SALT .rgExpDOC, .RadGrid_SALT .rgExpPDF, .RadGrid_SALT .rgExpCSV {
  background-image: url('../Common/Grid/export.gif'); }
.RadGrid_SALT .rgExpXLS {
  background-position: 0 0; }
.RadGrid_SALT .rgExpDOC {
  background-position: 0 -50px; }
.RadGrid_SALT .rgExpPDF {
  background-position: 0 -100px; }
.RadGrid_SALT .rgExpCSV {
  background-position: 0 -150px; }
 
/*editing*/
/*hierarchy*/
/*command row*/
/*multirow select*/
.rgCellSelectorArea_SALT, .GridRowSelector_SALT {
  background: #039; }
 
/*row drag n drop*/
.GridItemDropIndicator_SALT {
  border-top: 1px dashed #039; }
 
/*tooltip*/
.GridToolTip_SALT {
  border: 1px solid #a0afc3;
  padding: 3px;
  background: #eef4fb;
  color: #4c607a; }
 
/*rtl*/
.RadGridRTL_SALT .rgHeader:first-child, .RadGridRTL_SALT th.rgResizeCol:first-child, .RadGridRTL_SALT .rgFilterRow > td:first-child, .RadGridRTL_SALT .rgRow > td:first-child, .RadGridRTL_SALT .rgAltRow > td:first-child {
  border-left-width: 1px;
  padding-left: 7px; }
.RadGridRTL_SALT .rgPageFirst {
  background-position: 0 -1000px; }
  .RadGridRTL_SALT .rgPageFirst:hover {
    background-position: 0 -1050px; }
.RadGridRTL_SALT .rgPagePrev {
  background-position: 0 -850px; }
  .RadGridRTL_SALT .rgPagePrev:hover {
    background-position: 0 -900px; }
.RadGridRTL_SALT .rgPageNext {
  background-position: 0 -700px; }
  .RadGridRTL_SALT .rgPageNext:hover {
    background-position: 0 -750px; }
.RadGridRTL_SALT .rgPageLast {
  background-position: 0 -550px; }
  .RadGridRTL_SALT .rgPageLast:hover {
    background-position: 0 -600px; }
.RadGridRTL_SALT .rgExpand {
  background-position: -20px -496px; }
.RadGridRTL_SALT .rgCollapse {
  background-position: -22px -444px; }
0
Magdalena
Telerik team
answered on 02 Apr 2015, 07:50 AM
Hi,

I have applied the CSS code, but the result is the same. I have noticed that there are not styles for RadPanelBar. Could you open a support ticket and provide us with a sample project where the layout will be the same as at your side?


Regards,
Magdalena
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Helen
Top achievements
Rank 1
answered on 02 Apr 2015, 01:55 PM
Hi Magdalena,

I created a sample project attached to ticket #922729.  Thank you for your help.

Regards,

Helen
0
Magdalena
Telerik team
answered on 06 Apr 2015, 03:18 PM
Hi Helen,

You are welcome. Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
PanelBar
Asked by
Helen
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Helen
Top achievements
Rank 1
Share this question
or