locked
Div Not Aligning RRS feed

  • Question

  • User-1450801863 posted

    Having some issues with my divs not lining up properly. the buttons should be inline with the text per line

    <!-- Template: My Address -->
        <xsl:template match="cxa">
            <div>
                <xsl:attribute name="ID">
                    <xsl:value-of select="cxa_key" />
                </xsl:attribute>
    			<div width="100%">
    				<div width="50%">
    					<xsl:value-of select="Type" /> - 
    					<xsl:if test="Primary=1">						
    						<b><xsl:value-of select="Address" /> (primary)</b>
    					</xsl:if>
    					<xsl:if test="Primary=0">
    						<xsl:value-of select="Address" />
    					</xsl:if>
    					<xsl:if test="Linking=1">(Linking)</xsl:if>
    				</div>
    				<div width="50%" style="float:right;">
    					<xsl:if test="Primary=0 and AHA=0 and Linking=0">
    						<button class="button js-form-submit form-submit" onclick="AHAASyncDelete(this,'fef0ac71-ee49-40ca-b179-54d6a58e7382', '{cxa_key}');" type="button" style="background-color:red;">
    							Delete
    						</button>
    					</xsl:if>
    					<xsl:if test="AHA=1 or Linking=1">				
    						<button class="button js-form-submit form-submit" onclick="OpenNewWindow('Dynamicpage.aspx?webcode=ChangeRequest&amp;Action=Add&amp;cst_key={cst_key}&amp;cor_rat_code=AHA Contact Change Request&amp;cor_crr_code=Address Change Request','width=600')" href="javascript:void(0);" title="Edit Address Information" type="button">
    							Edit
    						</button>
    					</xsl:if>
    					<xsl:if test="AHA=0 and Linking=0">
    						<button class="button js-form-submit form-submit" onclick="OpenNewWindow('DynamicEditModal.aspx?modal=yes&amp;formkey=7c6ed280-8b78-4f45-8ecf-e15f73ec4f0b&amp;key={cxa_key}','width=600')" href="javascript:void(0);" title="Edit Address Information" type="button">
    							Edit
    						</button>
    					</xsl:if>			
    				</div>
    				<hr></hr>
    			</div> 			
            </div>
        </xsl:template>

    Monday, October 15, 2018 9:03 PM

All replies

  • User-893317190 posted

    Hi  mholmesAHA,

    You should put your text and  the button's div  in another div. Div doesn't have  width property . If you want to specify width of  div, you could write  <div style="width:40px" >.

    Below is a sample css design.

    <div>
               
    <h2>my address</h2>

    <!--the first line--> <div > mytext for delete mytext for delete mytext for delete mytext for delete mytext for delete
    <!--the div of the button--> <div style="float:right;"> <button class="button js-form-submit form-submit" onclick="AHAASyncDelete(this,'fef0ac71-ee49-40ca-b179-54d6a58e7382', '{cxa_key}');" type="button" style="background-color:red;"> Delete </button></div> <hr /> </div>

    <!--the second line--> <div > mytext for edit mytext for edit mytext for edit mytext for edit mytext for edit <!--the div of the button--> <div style="float:right;"> <button class="button js-form-submit form-submit" onclick="OpenNewWindow('Dynamicpage.aspx?webcode=ChangeRequest&amp;Action=Add&amp;cst_key={cst_key}&amp;cor_rat_code=AHA Contact Change Request&amp;cor_crr_code=Address Change Request','width=600')" href="javascript:void(0);" title="Edit Address Information" type="button"> Edit </button></div> <hr /> </div> </div>

    And the result.

    Best regards,

    Ackerly Xu
      

    Tuesday, October 16, 2018 3:16 AM
  • User-1450801863 posted

    Maybe I'm not explaining it correctly. If you look at the address line, the button Edit and Delete should be on the same line and its half way down. I should be aligned 

    Tuesday, October 16, 2018 2:14 PM
  • User-893317190 posted

    Hi mholmesAHA,

    You could add one more button in the div.

     <div  >
                        mytext for delete     mytext for delete     mytext for delete     mytext for delete     mytext for delete 
    				
    					<div  style="float:right;">	
    <!--the first button--> <button class="button js-form-submit form-submit" onclick="OpenNewWindow('Dynamicpage.aspx?webcode=ChangeRequest&amp;Action=Add&amp;cst_key={cst_key}&amp;cor_rat_code=AHA Contact Change Request&amp;cor_crr_code=Address Change Request','width=600')" href="javascript:void(0);" title="Edit Address Information" type="button"> Edit </button>&nbsp;&nbsp;
    <!--the second button--><button class="button js-form-submit form-submit" onclick="AHAASyncDelete(this,'fef0ac71-ee49-40ca-b179-54d6a58e7382', '{cxa_key}');" type="button" style="background-color:red;"> Delete </button></div> <hr /> </div>

    Best regards,

    Ackerly Xu

    Wednesday, October 17, 2018 1:36 AM