I've got CSS that looks like this:
a.HyperLinkHover
{
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1;
}
a.HyperLinkHover:visited { color:Purple;}
But when I click my <asp:HyperLink> where it is defined as:
<asp:Hyperlink runat=server id=hlfile cssclass=HyperlinkHover />
it does not have a purple color for being visited.
I assume I did it wrong ?
unless you have a copy paste error then your cssClass doesnt match the CssDefinition
One has an uppercase Link and the other has a lower case link in HyperLinkHover
a.HyperLinkHover {
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1; }
a.HyperLinkHover:visited { color:Purple;}
/* hover style would come after visited */
and make sure the CssClass is defined with the same capitalisation
<asp:Hyperlink runat=server id=hlfile cssClass="HyperLinkHover" />
Related
I'm working on a ASP.Net Web Forms project .I need to show icon in Gridview row dynamically based on a condition and need to show a tool tip when user hovers on that icon. Using the title attribute I was able to show the tool tip, but I need to design the tool tip as required (Square). How can I achieve that ..? ,How to add style to title attribute ..?
This is the code behind method
protected string GetUnsupportedIcon(MNDto a)
{
if (!a.Supported)
{
return $#"<i class=""fa fa-warning"" title='{message}' style=""color:#EEA42E;font-size:16px""></i>";
}
else return $#"<i class=""hidden""></i>";
}
Calling this method from aspx page
<asp:TemplateField HeaderText="<%$ Resources:ColumnNewCategory.HeaderText %>" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Middle" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="mxcell" HeaderStyle-CssClass="Outside">
<ItemTemplate>
<%# ((MNDto)Container.DataItem).SuggestedCategory %> <%# GetUnsupportedIcon((MNDto)Container.DataItem) %>
</ItemTemplate>
</asp:TemplateField>
You can't style an actual title attribute
How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)
Example code:
<a href="http://www.google.com/" title="Hello Stackoverflow!">
Example code --- Hover me
</a>
Example CSS:
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
I have a List with grouped Object List Items in it. Like here in the Explored App, click on Samples. Now every of those items have a padding of 1rem, given by the css with the selector .sapMLIB.sapMObjLItem .
Now I wanted to reduce the top and the bottom padding to 0.25rem, so I added a
class to the Object and imported a custom css (via manifest.json), all as described in the Walkthrough. It did not work as the normal css overwrites my custom one.
An other try was to add the class sapUiNoContentPadding to the elements, but also the css rules behind that get overwritten by the rules described in the first paragraph.
What am I doing wrong? how to remove that padding without rewriting the renderer?
MyView:
<mvc:View
controllerName="sap.ui.xxxx.someapp.controller.MyList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<StandardListItem title="Titel"/>
<List class="sapUiResponsiveMargin sapUiNoContentPadding"
width="auto"
items="{path : '//elementsSet',
sorter : {
path : 'attribute1}',
group : true
}
}">
<items>
<ObjectListItem title="{= ${attribute1} === '' ? 'Enter Text Please' : ${attribute1}}"
icon="{= ${attribute1} === '' ? 'sap-icon://alert' : 'sap-icon://sys-enter'}"
number="{attribute4}"
numberUnit="$"
numberState="{= ${attribute4} > 10 ? 'Error' : 'Success' }"
type="Active" press="onItemPress"
markFlagged="true" markFavorite="true"
showMarkers="true"
class="sapUiNoContentPadding myownclassforpadding">
<firstStatus>
<ObjectStatus
text="some text" />
</firstStatus>
<attributes>
<ObjectAttribute text="{attribute1}" visible="false"/>
<ObjectAttribute text="{attribute2}"/>
<ObjectAttribute text="{attribute3}" visible="false"/>
<ObjectAttribute text="{attribute4}" visible="false"/>
</attributes>
</ObjectListItem>
</items>
</List>
</mvc:View>
my css
.myownclassforpadding{
padding: 0;
background-color: green;
}
Your CSS class myownclassforpadding will not be used, because CSS from the library is more specific as it uses two classes sapMLIB and sapMObjLItem.
You can make your CSS more specific this way:
.sapMLIB.sapMObjLItem.myownclassforpadding{
padding: 0;
background-color: green;
}
Have a look at the JSBin example.
Try the below selector to override default css.
.sapMLIB.sapMObjLItem.myownclassforpadding{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
background-color: green;
}
If you write !important after the properties you want to change, it will overwrite the sapUI5 class properties.
For example:
.myownclassforpadding{
padding: 0 !important;
background-color: green !important;
}
This will make your padding and background-color properties take precedence over sapUI5.
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.
I have an div element in website markup as follows.
<div id="mainContainer" class="container" runat="server">
I have assigned it a css class as follows.
div#mainContainer.container {
width: 100%;
margin: 0 auto;
margin-top:40px;
height:500px;
background:url("../img/bgimg.png")no-repeat;
}
Now after a button click I want to remove only the background of that div and don't want to tamper any positioning of elements inside it. And btw I am using ASP.net to create this website. How can I do that ?
If you want to achieve this in a server-side event, you'll need to add the runat="server" attribute to your <div> element, and it will need an id attribute. This will make it easy to alter server-side.
You'll need an event-handler method in your code-behind for the button click.
In this event handler, do something like (this assumes the id of your <div> is "container")
container.Style["background"] = String.Empty;
However, in your question, you say you've assigned your element a class. If this is the case, the above might not work. It might be easiest to define another CSS class without this background image rule, and then in the code-behind do this:
container.Attributes["class"] = "newClass";
Now with pure CSS.
.button{
background:green;
}
.background-class{
background:red;
}
.button:active + .background-class{
background:yellow;
}
Check this http://jsfiddle.net/AX8tY/
You will need to use JavaScript (either direct or some JavaScript framework like jQuery) and set the CSS style to
background:none
This means you could alter the style of the specific instance or you could define a new CSS class to apply.
With a simple javascript as:
onclick="javascript:getElementById('div_element_id').style.backgroundImage = '';"
or you may use jQuery's API aswell.
How about something like this:
If your HTML is something like this:
<button class="your-button" />
<div class="background-class">
...
</div>
Then your JS might look something like this (this assumes you're also using jQuery):
$(".your-button").click(function(){
$(".background-class").removeClass("background-class");
});
EDIT : I just saw in your comment that you'd like to use a server-side event. This is a client-side solution.
If you use jQuery you could try something like this :
$('button#idButton').click(function{
$('div#idDiv').css('background':'none')
});
If you don't use jquery you should implement a javascript function on the onClick event, try something like :
<input type="button" name="button1" id="button1" onClick="javascript:deleteBackground()" />
<script>
function deleteBackground(){
Document.getElementById('div_element_id').style.backgroundImage = '';
}
</script>
if you defined a class
.yourclassname {
background: url('..');
}
you can also use the remove class function
$('div').removeClass('yourclassname');
<script language="javascript" type="text/javascript">
function SetClass() {
var ID = document.getElementById('<%=mainContainer.ClientID %>');
ID.className += " ChangeBackground";
return false;
}
</script>
<style type="text/css">
div#mainContainer.container
{
width: 100%;
margin: 0 auto;
margin-top: 40px;
height: 500px;
background: url("wallpaper-1554220.jpg")no-repeat;
}
.ChangeBackground
{
background: none !important;
}
</style>
<asp:Button ID="btn" OnClientClick="return SetClass();" runat="server" Text="Change CSS"/>
I add hover images to .Net LinkButtons using the following method:
.rollover a
{
background-image:url(/images/shoppingcart/butpill_continue.gif);
}
.rollover a:hover
{
background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}
<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>
This works fine with regular link buttons.
I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?
Try changing your css to
a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
Or just
.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
You'll also have to change your other images to something like this
<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />