I am using radcombobox to display data, now I am not using any css style for the radcombox, but it still has gray color background.
I want to remove that color.
Below is my rad combobox code :
<telerik:RadComboBox ID="RadCountry" runat="server" CssClass="rcbInput rcbEmptyMessage"
AutoPostBack="False" EmptyMessage="Select a Customer" EnableAutomaticLoadOnDemand="True"
ItemsPerRequest="10" ShowMoreResultsBox="True" EnableVirtualScrolling="True" Filter="Contains" DataTextField="Contact_First_Name"
Font-Names="Arial" Font-Size="11px" ShowToggleImage="false">
</telerik:RadComboBox>
I am also attaching the output of the given code.
i solve this by using below css
<style type="text/css">
div.CustomCssClass .rcbInputCell INPUT.rcbInput {
color: black;
height: 1px;
padding-top: 10px;
}
</style>
Use browser debugger and goto to Inspect Element, find which class / element is the reason for background. Then overwrite css to background:none!important for that element / css rule.
Related
I am trying to make background color of by DropDown as transparent even for Listitem.
<asp:Label ID="Label1" runat="server" Text="Language : " style="color:white;padding:0 2px 0 2px;background-color: transparent !important;" />
<asp:DropDownList ID="ddlLanguages" runat="server" AutoPostBack="true" style="color:black;background-color: transparent !important;" >
<asp:ListItem style="background-color:transparent" Text="English" Value="en-us" />
<asp:ListItem style="background-color:transparent" Text="French" Value="fr" />
</asp:DropDownList><span style="color: white;;padding:0 2px 0 2px;"> | </span>
but it does not work even added css in my main CSS file still not work
select.tt-dropdown-menu {
background-color: transparent !important;
}
select.tt-dropdown-menu .tt-suggestions .tt-suggestion {
cursor: pointer;
border-bottom: 1px solid #000;
}
not sure why not its working. Any Suggestions !!
Actually, changing the background color to transparent doesn't have any effect at all. That because the select option container has some attributes that are defined by the browser in the first place and the operating system secondly. This means if you change the background color of the ListItem to transparent, the container's color is white and you won't be able to find the difference. Except transparent, you can change the color of the odd, even elements, by using that js/jquery script:
window.onload = function () {
$("#<%=ddlLanguages.ClientID%> option:odd").css("background-color", "red");
$("#<%=ddlLanguages.ClientID%> option:even").css("background-color", "blue");
}
Which can be achieved by css, but I see jquery a more stable choice for implementation in web forms
I have web page with multiple text boxes, I have added Ajax-ValidateCalloutExtender to validate text boxes and it is working fine.
I have added CCS to highlight text boxes to be "Red" for field missing but it does not highlight the text box border to be "Red" .
See my coding below,
<td>
<asp:TextBox ID="txtPlanName" runat="server" Width="250px" BorderColor="#669999"
BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter your Plan Name" Display="None" SetFocusOnError="true" ControlToValidate="txtPlanName" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" Enabled="true" runat="server" HighlightCssClass="tkpdna_req_field_highlight" ></asp:ValidatorCalloutExtender>
</td>
CSS
.tkpdna_req_field_highlight {
border-color:Red;
border-style:solid;
}
you're missing border-width (which is 0 as default, this is why you don't see it).
do it as following:
.tkpdna_req_field_highlight {
border:solid 1px red !important;
}
adding !important to force override of previous style values.
hope that helps
Try the !important override:
.tkpdna_req_field_highlight {
border: 1px solid red !important;
}
Next to that, make sure that the textarea is rendered properly and the class attribute including the classname is added to the textbox like so:
<textarea class="tkpdna_req_field_highlight" ... ></textarea>
I have an image button inside the div. I am increasing the image size and z-index on the hover on div. but I want to add some text over the image button when the hover is calling. how can I do ?
my css:
.HoverImageClass input[type=image]:hover
{
position: relative;
z-index: 10000;
height: 274px;
width: 226px;
margin-top: -67px;
margin-left: -14px;
padding-bottom: 13px;
background-color: #F7F6EB;
}
my html:
<div id="divImageDisplay" class="HoverImageClass" runat="server">
<asp:ImageButton runat="server" CssClass="course_img" ID="imgbtnCourse" AlternateText='<%#Eval("LevelName") %>' ToolTip='<%#Eval("LevelName") %>' ImageUrl='<%#Eval("CourseImagePath") %>' CausesValidation="False" CommandName="AddToCart" CommandArgument='<%# String.Format("{0},{1},{2},{3},{4},{5}",Eval("ID"),Eval("LevelID"),Eval("CurrencyWithValue"),Eval("CourseImagePath"),Eval("CategoryID"),Eval("MRP")) %>'></asp:ImageButton>
</div>
Well, if you do the text on the button via normal HTML, one possible method would to on the main CSS class make the " color:"" " the same as that of the background, and then on the :hover class, you could change it to a different color that would be readable/eligible. Or possibly you could even set the font size to something really tiny on the original, then bump it up a size on the :hover!
Hope it helps!
I have a DropDownList in my aspx file like this:
<asp:DropDownList runat="server" ID="MaxRec">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>150</asp:ListItem>
<asp:ListItem Selected="True">200</asp:ListItem>
</asp:DropDownList>
In Chrome it renders like this:
How can i set the alignment on all ListItems to be to the right so that values are properly aligned?
I tried setting style="text-align:right" on the DropDownList and on the ListItems but it doesn't have any effect.
I need a solution that also works on Chrome.
Thanks for replies!
Adding the following style will align the numbers as required but will move the drop down arrow to the left instead of the right.
Other than using this I assume the inability to right align select options may be a limitation in Chrome.
.drop-down-list
{
direction: rtl;
}
the below code works for me
<head>
<style type="text/css">
select.myDropDownList {
text-align: right;
}
</style>
</head>
<asp:DropDownList ID="myDropDownList" Runat="server" CssClass="myDropDownList">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>150</asp:ListItem>
</asp:DropDownlist>
I have a simple question. I have a ListView which I have added a DataPager control to.
At present the DataPager is just plain numeric based. Just wondering, is it possible to add CSS styles to the numeric numbers IE have a 1px solid border around each number ect.
Any help would be greatly appreciated.
Insert NumericButtonCssClass to the NumericPagerField
in my example i call it datapagerStyle
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField NumericButtonCssClass="datapagerStyle" />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
and then in the stylesheet you make
.datapagerStyle
{
color:black;
border: 1px solid black;
}
I think this will solve your problem
<asp:DataPager ID="DataPager1" runat="server" PageSize="6" OnPreRender="DataPager1_PreRender">
<Fields>
<asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="numeric_button" CurrentPageLabelCssClass="current_page" NextPreviousButtonCssClass="next_button"/>
<asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True"
ShowNextPageButton="false" ShowPreviousPageButton="False" ButtonCssClass="last_button" />
</Fields>
</asp:DataPager>
<style type="text/css">
.numeric_button{background-color:#384B69;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px; border:none;}
.current_page{background-color:#09151F;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
.next_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
.last_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
</style>
you'll need to look at <PagerTemplate> here's some information:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx
You can set CssClass for your control I think that can do what you want. I don't test it so just an ideal! Hope this helpfull 4 you!
CssClass="Pagging"
Pagging{
border:1px solid #000;
}
As Nguyen Hiep answered, setting a CSSClass to the control might help. Then look at the source code generated by the control. The reason the CssClass might not be removing the border could be that .NET has the tendency to wrap the generated HTML elements in extra divs or tables (the border might be set on a different element contained in that div) Once you find out which element has the css class, use CSS descendant selector to remove the border.
Because in .NET when it generate a control it automatically add prefix something like:
controlID = "data_customer" and became like that ctrl_1_etc_ + data_customer. So you must write all the long name of this control in CSS file and it work for sure! Hope this help you!
I don't know what a DataPager control is. But if it's some kind of pagination* class, and you want to do something like what's at the bottom of the StackOverflow New Questions page, then yes it is completely doable in CSS.
In most cases, the page numbers are just hyperlinks. So what you can do is find out what class the pagination control uses for the links, and style them the way you want. For instance, if the HTML looks something like this:
<div class="pagination">
<span class="page_cur">1</span>
2
3
4
5
...
</div>
Then you'll want to include something like this in your CSS:
<style>
div.pagination > span.page_cur, div.pagination > a.page_num {
display: block;
float: left;
padding: 4px;
}
div.pagination > span.page_cur {
background-color: #ddd;
border: 1px solid #ddd;
}
div.pagination > a.page_num {
background-color: #fff;
border: 1px solid #e0e0e0;
}
</style>
If you don't know the CSS selectors to use for the pagination numbers, I suggest taking a look at some online references on CSS selectors. The Firebug plugin for Firefox is also very helpful in identifying layout elements and the styles currently applied to them.
*StackOverflow doesn't like URLs with underscores in them apparently:
Pagination