I have used a Label in a repeater control, which shows a tool tip. However, it is too small and is difficult to read. So I would like to change the format (apply css) to that tool tip.
Any ideas?
<td align="left" style="width: 145px">
<asp:Label ID="lblItem" Text='<%# Eval("Add1").ToString().Substring(0, Math.Min(Eval("Add1").ToString().Length, 20))+"..." %>'
ToolTip='<%# Eval("Add1")%>' runat="server" />
</td>
Use jQuery to show tool-tip, its best solution for this, see following link which can be help full to you.
Animated Tooltip Javascript this will be very useful, and surely its working because I had already used them.
Related
I try to set two control in a td.
1. use a panel. as follow.
<td style="display: inline;">
<asp:Panel ID="pContainer" runat="server" Wrap="false">
<telerik:RadTextBox ID="rtxtBookingID" runat="server"></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvBookingID"
runat="server" ControlToValidate="rtxtBookingID" ErrorMessage="|Booking ID"
Display="Dynamic"></asp:RequiredFieldValidator>
<telerik:RadButton ID="rbtnOpen" runat="server" Text="Browse" OnClientClicked="openViewWindow()"/>
</asp:Panel>
</td>
how to solve the problem.
if I use two td to place the two control . but the first control in the td will gernerate a div. so the two control distance is far?
As long as it works and you get ok behaviour you are fine and for layout issues you should use css. The way you place the controls on the page also depends on overall page design and structure, keep in mind that usage of tables to control layout is not promoted anymore and you should use divs and css whenever possible... again depending on whole page design of course.
I was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?
First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!
"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.
I have an <asp:TextBox TextMode="MultiLine" Height=350 Width="200"> and have elements around it.
I don't want to allow the user to change the height and width of the asp:TextBox because it messes with the alignment of other elements around it.
Solution?
[Answer added for future reference]
You can use resize: none; in CSS to disable the resize-functionality offered by Firefox/Safari. An example and explanation can be found here.
(thanks to BoltClock)
If you want to add it in your textbox tag, you can do it like this:
<asp:TextBox ID="TextBox7" runat="server" MWidth="245px" Height="245px"
TextMode="MultiLine" style="resize:none"></asp:TextBox>
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"
when I try to create a number of Checkboxes, I have strange spaces inserted:
image
<td style="width:85%;white-space:nowrap;" colspan=3>
<asp:CheckBox ID="rdoSchool" runat="server" Text="School (NSL)" />
<asp:CheckBox ID="rdoSFS" runat="server" Text="Summer Food Service" />
<asp:CheckBox ID="rdoOther" runat="server" Text="Other (Specify)" /> <asp:TextBox ID="txtOther" Width="125px" runat="server" />
</td>
How can I make the label closer to the checkbox?
This isn't default styling, and is most likely caused by your CSS. Use a tool like Firebug (on Firefox) or Developer Tools on IE8 to find the applied CSS rules (Should be F12 either way).
Take a look at the markup the CheckBox control generates.
... "Now there's your problem" - Adam Savage, Mythbusters.
Basically the CheckBox control (along with the RadioButtonList control) generates crappy markup. One way to fix this, is to extend and override the Render method to implement some sensible markup-generation code. Another option is to force the HTML-tables the control generates into place with some clever CSS tricks.