Results 1 to 4 of 4

Thread: Need to align buttons at bottom.

  1. #1

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,080

    Need to align buttons at bottom.

    Hi.
    I need to have a couple of charts in parallel. It will work OK but I also need 2 buttons below every chart.
    When I insert the button the second chart is missing and the buttons do not align to the center.
    Any thoughts?
    Name:  Clipboard01.jpg
Views: 43
Size:  9.0 KB


    Code:
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentContent" Runat="Server">
       
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     
    
        <table>
    
            
      <tr>
    <td colspan="2">
        <div class="demo-container size-wide">
            <telerik:RadHtmlChart runat="server" ID="PieChartMainstream" Width="333" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Mainstream">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90" >
                            <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Reserved"
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Available"
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
         
           <div style="position:center;" >
             <telerik:RadButton ID="ReturnButton1" Text="ADD" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdAssignM_Click" Enabled="true" >
                         </telerik:RadButton>
    
         <telerik:RadButton ID="ReturnButton2" Text="VIEW" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdViewM_Click" Enabled="true">
                         </telerik:RadButton>
               </div>
            </div>
        </td>
          <td>
        <div>
    
             <telerik:RadHtmlChart runat="server" ID="PieChartPremium" Width="333" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Premium">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90">
                            <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Reserved"
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Available"
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
            <br />
             <div style="position:center;" >
            
                 </div>
        </div>
              </td>
            </tr>
              </table>
    
        
          
    
        <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                    <UpdatedControls>                   
                        <telerik:AjaxUpdatedControl ControlID="PieChartMainstream" LoadingPanelID="RadAjaxLoadingPanel1" />
                         <telerik:AjaxUpdatedControl ControlID="PieChartPremium" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
        </telerik:RadAjaxLoadingPanel>
       
    </asp:Content>
    .

  2. #2

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,080

    Re: Need to align buttons at bottom.

    I just added that using text align center I can get the add and view buttons below the chart. I have no idea why the other chart is missing.
    I'm thinking of removing the table and adding the div's side by side to see if it works but that in the office on Monday.
    .

  3. #3

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,080

    Re: Need to align buttons at bottom.

    OK the charts work fine, the main issue I have found is the buttons. As soon as I insert a new div with buttons on the second chart all hell breaks loose.
    If I don't have buttons at all or have the first two buttons then it will display fine.
    Here is the new code with the div's I made but the problem is the same.

    Code:
      <div style="display: inline-block">
     <telerik:RadHtmlChart runat="server" ID="PieChartMainstream" Width="333" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Mainstream">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90" >
                            <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Reserved"
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Available"
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
          
    
           <!-- If "I remove this it will work -->
    
                 <div style="text-align:center;" >
             <telerik:RadButton ID="RadButton3" Text="ADD" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdAssignP_Click" Enabled="true">
                         </telerik:RadButton>
    
         <telerik:RadButton ID="RadButton4" Text="VIEW" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdViewP_Click" Enabled="true">
                         </telerik:RadButton>
                 </div>
             
    </div>
    <div style="display: inline-block">
      <telerik:RadHtmlChart runat="server" ID="PieChartPremium" Width="333" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Premium">
                    <Appearance Align="Left" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90">
                            <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Reserved"
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Available"
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                       
                    </Series>
                    
                </PlotArea>
            </telerik:RadHtmlChart>
           
    
      
                <div style="text-align:center;" >
             <telerik:RadButton ID="RadButton1" Text="ADD" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdAssignP_Click" Enabled="true">
                         </telerik:RadButton>
    
         <telerik:RadButton ID="RadButton2" Text="VIEW" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdViewP_Click" Enabled="true">
                         </telerik:RadButton>
                 </div>
    
    </div>
    .

  4. #4

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,080

    Re: Need to align buttons at bottom.

    It appears that there is an error with the Pie Chart.
    What I managed to do is put the piecharts without any buttons and then create a new div and expand the buttons there.
    I can't find a better solution but if anyone has any suggestions you are welcome.

    So:
    Code:
    <div style="display: inline-block">
            <div>
     <telerik:RadHtmlChart runat="server" ID="PieChartMainstream" Width="233" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Mainstream">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90" >
                            <LabelsAppearance Position="InsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Reserved"
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Available"
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
          </div>
          
           
             
    </div>
    
    
         <div style="display: inline-block">
            <div>
     <telerik:RadHtmlChart runat="server" ID="PieChartPremium" Width="233" Height="150" Transitions="true" Skin="Silk">
                <ChartTitle Text="Vouchers Comfort">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Left" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries StartAngle="90" >
                            <LabelsAppearance Position="InsideEnd" DataFormatString="{0} %">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name=""
                                    Y="18.3"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name=""
                                    Y="35.8"></telerik:PieSeriesItem>                                                   
                            </SeriesItems>
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
         </div>       
             
    </div>
    
     <br />
              <div  style="display: inline-block;text-align:left; position:relative; left:100px;" >
             <telerik:RadButton ID="RadButtonMainstreamAdd" Text="ADD" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdAssignP_Click" Enabled="true">
                         </telerik:RadButton>
              
          
         <telerik:RadButton ID="RadButtonMainstreamView" Text="VIEW" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdViewP_Click" Enabled="true">
                         </telerik:RadButton>
                 </div>
    
            <div  style="display: inline-block;text-align:left; position:relative; left:170px;" >
             <telerik:RadButton ID="RadButtonPremiumAdd" Text="ADD" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdAssignP_Click" Enabled="true">
                         </telerik:RadButton>
              
          
         <telerik:RadButton ID="RadButtonPremiumView" Text="VIEW" OnClientClicked="
                              OnClientItemClicked" runat="server" Width="58px" OnClick="cmdViewP_Click" Enabled="true">
                         </telerik:RadButton>
                 </div>
    .

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width