I use ASP.net 4.5.
I have this asp code:
<asp:RadioButtonList ID="rdHeaders" cssClass="radio-inline" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical">
</asp:RadioButtonList>
And this code behind that creates radio buttons list.
private void CreateRadioButtons(List<string> headers)
{
rdHeaders.Items.Add(Properties.ErrorStrings.DefaultHeader);
rdHeaders.SelectedIndex = 0;
foreach (string header in headers)
rdHeaders.Items.Add(header);
XMLHeaders.Visible = true;
}
And here how it looks on the browser:
As you can see I have overlap radiobuttons on the text.
UPDATE
Here is definition radio-inline class:
.radio-inline{
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
vertical-align: middle;
cursor: pointer;
}
My question is how can I move left text to prevent overlap?
Related
I want the textboxes to have the same color and the same size. However, the textboxes don't seem to change when I do the CSS. I also would like to know how to do it for multiple textboxes as I'm planning to add a lot more textboxes.
My CSS:
.TxtBox + .TxtBox{
border-style: none;
border-color: inherit;
border-width: 0;
position:absolute;
outline: 0;
height: 25px;
width:530px;
padding-left: 10px;
background-color: rgb(204, 204, 204);
top: 25px;
left: 165px;
}
And this is my Html using the Asp.Net framework:
<asp:TextBox class ="TxtBox" ID="TextBox2" runat="server" Height="20px"></asp:TextBox>
<asp:TextBox class="TxtBox" ID="TextBox1" runat="server" Height="16px"></asp:TextBox>
The "+" operator means "only the first child", so:
.TxtBox + .TxtBox{
means that you want to apply the style to the first textbox inside a textbox (assuming you set the class TxtBox to all of them)
Since you want to apply the style to all of the elements with that class, just do:
.TxtBox {
In my web application, i need to display selected text in section box if i checked many names i need to display the text in another line in anyone tell me is it possible to do or not. i need to show all the selected items in selection box.
I am getting result like image here. But i need to display all the checked items in selection box.How can i do this.
.aspx:
<asp:DropDownCheckBoxes ID="dropdown1" runat="server" AddJQueryReference="true" UseSelectAllNode="true" UseButtons="true"
OnSelectedIndexChanged="dropdown1_SelectedIndexChanged"
AutoPostBack="true" CssClass="drpdwnstyle" Width="700px" >
</asp:DropDownCheckBoxes>
<style type="text/css">
.drpdwnstyle {
width: 250px;
position:absolute;
text-align: left;
text-overflow: ellipsis;
direction: ltr;
}</style>
.CS:
protected void dropdown1_SelectedIndexChanged(object sender, EventArgs e)
{
List<String> checkedList = new List<string>();
foreach (ListItem item in dropdown1.Items)
{
if (item.Selected)
{
checkedList.Add(item.Value);
}
}
dropdown1.Texts.SelectBoxCaption = String.Join(",", checkedList.ToArray());
Thank you
Remove text-overflow: ellipsis;
Add white-space: initial;
style type="text/css">
.drpdwnstyle {
width: 250px;
position:absolute;
text-align: left;
white-space: initial;
direction: ltr;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have an asp.net label (lblFriday) and a div next to it. lblFriday is showing the number data retrieved from database table. I want the div next to lblFriday to show a red triangle if the text of lblFriday is a negative number and green triangle if the text of lblFriday is a positive number.
Currently I've set the css class of the div manually with red color. Here is the code,
HTML / ASPX :
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div class="arrow-down"></div>
CSS :
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
Any ideas will be helpful.
Thanks.
The first thing that you need to do is adding id and runat="server" attribute to the div so it will be accessible from the code behind.
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div id="divTriangle" runat="server"></div>
then you need to fix your css as follows, where arrow-down will show a red triangle facing down and arrow-up will show a green triangle facing up
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
}
.arrow-up
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid green;
}
then set the CSS class of divTriangle in your code behind based on the value of lblFriday.Text. Let's say the value is a decimal retrieved from database, here's what your code behind should look like:
decimal stockValue = ....; // get the value from database
lblFriday.Text = stockValue.ToString();
if (stockValue > 0)
{
// set css class to arrow-up
divTriangle.Attributes["class"] = "arrow-up";
}
else if (stockValue < 0)
{
// set css class to arrow-down
divTriangle.Attributes["class"] = "arrow-down";
}
else
{
// no css class if stockValue is zero
divTriangle.Attributes["class"] = "";
}
Depending on how you are binding the data to the label, you could do:
<asp:Label ID="lblFriday" runat="sever" Text='<%# Eval("DATA") %>'
OnPreRender="lblFriday_PreRender" CssClass="label_target" />
Then in the code behind:
protected void lblFriday_PreRender(object sender, EventArgs e)
{
Label lblFriday = sender as Label;
decimal d;
if(Decimal.TryParse(lblFriday.Text, out d))
{
lblFriday.CssClass += d < 0 ? " negative" : d > 0 ? " positive" : String.Empty;
}
}
And finish with some CSS:
.label_target.negative::after
{
content: '\25BC';
color: Red;
}
.label_target.positive::after
{
content: '\25B2';
color: Green;
}
I have a button :
<div class="HeaderBarThreshold">
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
</div>
I am trying to change the color of the button on mouse hover :
Here is my css :
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
}
.HeaderBarThreshold:hover
{
color: Red;
}
It doesnt work somehow. Please let me know.
Try using the CssClass Property of ASP.NET controls. This will directly point the LinkButton itself to the CSS class, instead of having to use the div tag. For example:
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server" CssClass="HeaderBarThreshold">Threshold</asp:LinkButton>
Here is a fiddle http://jsfiddle.net/zpfw7/
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
width:300px;
height:30px;
border:1px solid #000;
text-align:center;
}
.HeaderBarThreshold:hover
{
color: Red;
background:blue;
}
try this thing:
.HeaderBarThreshold a:hover
{
color: Red;
}
Add the CSS class attribute to your web control
<asp:LinkButton CSSClass="HeaderBarThreshold" ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
Also your CSS is wrong anyway because you don't have anything assigned to class "HeaderBarThreshold".
just try this
.HeaderBarThreshold:hover a
{
color: Red !important; // !important may not be necessary
}
.upda_link {
font-size: 15px !important;
color: white;
font-weight: bolder;
}
.upda_link:hover {
text-decoration: none;
color: white;
}
<asp:LinkButton ID="LinkButton1" runat="server" Text="Update" CssClass="upda_link" CausesValidation="false">
</asp:LinkButton>
When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?
By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Another option
form label:after {
content: "*";
}