I'm using the toggle button from the Ajax Control Toolkit .
On my page I want the following layout (all on the one line):
Toggle Button | Text Box | Button | Button | Toggle Button
Problem
At the moment I have this layout:
Toggle Button | Text Box | Button | Button |
ToggleButton
Code for toggle button
<asp:CheckBox ID="CheckBoxToggleTips" runat="server" AutoPostBack="true"
OnCheckedChanged="CheckBoxToggleTips_CheckedChanged" />
<ajaxToolkit:ToggleButtonExtender ID="ToggleTips" runat="server"
TargetControlID="CheckBoxToggleTips"
ImageWidth="32"
ImageHeight="32"
CheckedImageAlternateText="Hide Tips"
UncheckedImageAlternateText="Show Tips"
UncheckedImageUrl="~/Images/lightbulboff.png"
CheckedImageUrl="~/Images/lightbulbon.png" />
HTML Expection
<div class="title">
<span id="mainContentPlaceHolder_LabelDepartment">A&H</span> Risks<br>
<div style="position: relative;">
<a id="mainContentPlaceHolder_CheckBoxToggleTips_ToggleButton" href="" style="position: absolute;
left: 0px; top: 0px; width: 32px; height: 32px; font-size: 32px;
background-image:url(http://localhost:10833/Images/lightbulboff.png);
background-repeat: no-repeat no-repeat;" title="Show Tips">
</a>
</div>
</div>
The style attribute above is auto generated. So my question is how can I use my own styling instead of this? Or how can I edit the left
and top
values?
Thanks
There is no reason why the second ToggleButton should be in the second line if it has the same css as the first one. I would recommend using CssClass attribute and make sure it uses the same class as the first ToggleButton. You are most likely running out of width, so contain the whole thing in an outer DIV and set the width appropriately. Hope this helps.
It looks like a page layout problem: check for the missing closing tag </div>
Hope this will help.
Regards, Alex
Hey You can Resolve by CSS like that.
#mainContentPlaceHolder_LabelDepartment{
margin:0;
padding: 2px;
width: 223px;
float:left;
height:450px;
position: relative;
}
This Sample code you can made your own code to styling the toggle button
Hope It helps you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.