2010-08-21 4 views
3

"Register"버튼을 정렬하여 col2에서 오른쪽 정렬 할 수 있습니까?CreateuserWizard, "Register"버튼을 정렬하여 col2에서 오른쪽 정렬 할 수 있습니까?

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" CreateUserButtonText="Register" ContinueDestinationPageUrl="~/Secure/PromotePandaVisa.aspx"> 
    <SideBarTemplate> 
     Sidebar template 
    </SideBarTemplate> 
    <WizardSteps> 
     <asp:CreateUserWizardStep runat="server"> 
      <ContentTemplate> 
       <table border="0" cellpadding="2" cellspacing="2"> 
        <colgroup> 
         <col width="120px"/> 
         <col width="150px" /> 
         <col /> 
         <tr> 
          <td class="CaptionLabel" colspan="3" style="white-space: nowrap; padding-left:10px; padding-top: 5px; padding-bottom: 15px;"> 
           <asp:Label ID="Label1" runat="server" CssClass="LargeCaption LightText" Text="Register as an Affiliate"></asp:Label> 
           &nbsp; 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="DefaultLabelCaption">User Name:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="UserName" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" Display="Dynamic" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="DefaultLabelCaption">Password:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="Password" runat="server" CssClass="DefaultTextBox TextboxWidth" TextMode="Password"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" Display="Dynamic" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword" CssClass="DefaultLabelCaption">Confirm Password:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="ConfirmPassword" runat="server" CssClass="DefaultTextBox TextboxWidth" TextMode="Password"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email" CssClass="DefaultLabelCaption">E-mail:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="Email" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" Display="Dynamic" ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="AnswerLabel1" runat="server" AssociatedControlID="Answer" CssClass="DefaultLabelCaption">Company Name:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="txtCompanyName" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="AnswerRequired1" runat="server" ControlToValidate="txtCompanyName" Display="Dynamic" ErrorMessage="Security answer is required." SetFocusOnError="True" ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr> 
          <td align="right"> 
           <asp:Label ID="AnswerLabel0" runat="server" AssociatedControlID="Answer" CssClass="DefaultLabelCaption">Website:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="txtWebsite" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           <asp:RequiredFieldValidator ID="AnswerRequired0" runat="server" ControlToValidate="txtWebsite" Display="Dynamic" ErrorMessage="Security answer is required." SetFocusOnError="True" ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1">Required</asp:RequiredFieldValidator> 
          </td> 
         </tr> 
         <tr style="display: none;"> 
          <td align="right"> 
           <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question" CssClass="DefaultLabelCaption">Security Question:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="Question" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           &nbsp;</td> 
         </tr> 
         <tr style="display: none;"> 
          <td align="right"> 
           <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer" CssClass="DefaultLabelCaption">Security Answer:</asp:Label> 
          </td> 
          <td> 
           <asp:TextBox ID="Answer" runat="server" CssClass="DefaultTextBox TextboxWidth"></asp:TextBox> 
          </td> 
          <td> 
           &nbsp;</td> 
         </tr> 
         <tr> 
          <td align="center" colspan="2"> 
           &nbsp; 
           <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1"></asp:CompareValidator> 
          </td> 
          <td align="center"> 
           &nbsp; 
          </td> 
         </tr> 
         <tr> 
          <td align="center" colspan="2" style="color: Red;"> 
           <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> 
          </td> 
          <td align="center" style="color: Red;"> 
           &nbsp; 
          </td> 
         </tr> 
        </colgroup> 
       </table> 
      </ContentTemplate> 
     </asp:CreateUserWizardStep> 
     <asp:CompleteWizardStep runat="server"> 
      <ContentTemplate> 
       <table border="0"> 
        <tr> 
         <td align="center"> 
          Complete 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Your account has been successfully created. 
         </td> 
        </tr> 
        <tr> 
         <td align="right"> 
          <asp:Button ID="ContinueButton" runat="server" CausesValidation="False" CommandName="Continue" Text="Continue" ValidationGroup="CreateUserWizard1" OnPreRender="StepNextButton_PreRender" /> 
         </td> 
        </tr> 
       </table> 
      </ContentTemplate> 
     </asp:CompleteWizardStep> 
    </WizardSteps> 
</asp:CreateUserWizard> 

가 여기에 디자인 뷰의 :

alt text

내가 추가 편집을 수행하기 위해 뒤에 코드에 코드를 추가 할

다음은 마크 업입니다. "ErrorMessage"LiteralControl을 추가했습니다. 코드 뒤에서 코드에 액세스하려면 어떻게해야합니까? 또는 컨트롤의 기능을 사용하여 사용자 지정 메시지를 표시하는 방법이 있습니까?

답변

2

CreateUserWizard 속성 CreateUserButtonStyle-CssClass을 사용하는 것이 좋습니다.

자신에게 새로운 클래스 정의 :

<style type="text/css"> 
    .foo{ 
      margin-left: 120px; 
    } 
    </style> 

그런 다음 마법사 버튼 속성을 설정을 :

<asp:CreateUserWizard CreateUserButtonStyle-CssClass="foo" 

유일한 문제는 방출되는 마크 업 대신 "권리"로 정렬을 가지고 있다는 것입니다 우리 want : "왼쪽".

See this image for a look in Firebug if the table cell alignment was set to LEFT.

오른쪽/왼쪽 <td> 콘텐츠 정렬 문제를 해결하면 설정 한 것입니다.

jQuery를 사용하여이 버튼을 찾아 부모 <td>을 가져오고 align 속성을 왼쪽으로 설정하십시오. 생식에서이 설정의

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<style type="text/css"> 
    .foo 
    { 
     margin-left: 120px; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var btn = $("#CreateUserWizard1___CustomNav0_StepNextButtonButton"); 
     btn.parent().attr('align', 'left'); 

    }); 
</script> 
<head> 

: 그것은 렌더링하는 방법을 http://pastebin.org/698287

은 다음과 같습니다

alt text

+0

$ ("#의 CreateUserWizard1___CustomNav0_StepNextButtonButton")는 null로 evakuated. 나는 JQuery를 몰라서 대신 이것을 시도했지만 동일한 결과를 얻었다. var btn = document.getElementById ("ctl00_phPageContent_CreateUserWizard1 ___ CustomNav0_StepNextButtonButton"); 당신은 서버 측 solutioin을 제안 할 수 있습니까? 난 정말 못생긴 생성 된 ID에 대한 하드 코딩 참조 경멸. – ChadD

+0

내가 본 ID를 사용하는 행운이 없었지만 검색 한 ID가 원본을 볼 때 본 ID와 다릅니다. – ChadD

+0

@Velika : 답장에 repro를 포함 시켰습니다. jQuery 만하면 버튼의 ID를 찾아서'$ ("#")'에 붙여 넣기 만하면된다. ''에 첫 번째 스크립트 요소로 jQuery 1.4에 대한 스크립트 참조를 넣었는지 확인하십시오. –

관련 문제