I'm working on a project which requires display of a set of product images and links in a tables and would like to implement the dynamic changing of a table cell on mouse over like they do on The Find http://www.thefind.com.
When you do a search and mouse over any table cell on the results page, the cell border changes to a raised 3-D type of border.
I'm wondering how to implement that effect?
There are quite a few different ways to go about it, give a few of these tuts a look:
http://css-tricks.com/row-and-column-highlighting/
Pure CSS: http://www.designisphilosophy.com/microsoft-expression-web/fancy-interactive-pure-css-list-boxes-with-hover-effect/
jQuery would be my way to go on this.
You could give a class to your table td's like <td class="niceBorder"></td>
Then either in an external .js file or in script tags in the head section of the page you can simply do somethign like the following:
$(".niceBorder").hover(function(){
$(this).css("border", "2px outset silver");
})
Make sure to include the jQuery library in your page before the .js file or the script tags in the head section.
Related
I'd like to simply customize my Sphinx theme so that all tables (no matter which type of table they are) have cells that are one solid color. Right now, creating a table defaults to alternating between white and grey for the table cell colors as seen in the attached image. I don't see anything specific to tables in my CSS file. Thanks in advance.
Created tables and received default behavior shown in image above.
One way is to use inline HTML and add CSS classes to your table. This will also give you more formatting control over the table.
.. html::
<table class="table table-my-special-table">
...
I want to change the color of the text displayed in a cell of a Material Table.
I have an array as my datasource where type is MatTableDataSource.
Some cells have regular text in them, like
rubber ducky.
I want to be able to change the color of part of that string, lets say duck.
My first idea was to add a span with some class that would do that, but the table won't let me add HTML tags, so when i do, I get the whole tag showing up as a text.
Is there a solution to this issue?
To summarize:
Problem - change color of part of text in Angular Material table (MatTableDataSource)
Failed attempt - insert span tag around text that needed styling. didn't work because table will display tags as regular text.
Looking for other suggestions.
Thanks!
Using <span [innerHtml]='myvar'> instead of {{myvar}} solved it. I am not sure if there is a better solution
I have a website that displays data with some html and the data that is displayed on the webpage has borders as it is contained in a container-fluid with bootstrap. My problem comes when I export the page as a pdf, or try to send the html as it is in an email. When I look at the pdf file that comes from the site, it has all of the contents of the different rows and columns, but there is no shape or borders for any of the cells that show up on the site.
Does this have something to do with the fact that the original way that the data is displayed on the website is using a bootstrap container rather than a table? The data is not currently set up as an html table as the fields of the data that I show on the website are set up in a specific way. Is there any way to keep this format in the export?
Here's what my page roughly looks like. Each of the cells holds data, but I want to be able to see the data as well as the borders of the cells when I export this as a pdf. As it is, I only see the contents of the cells but no borders or formatting.
Also, here is the function I'm using to export as a pdf:
function exportPDF() {
var divToPrint=document.getElementById("content");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
Often the borders are CSS formatted. Meaning that if you have a separate piece of code that contains the CSS styling, outside of the "content" div this will have no effect in your export. Could you check if this is the case? Perhaps you can add the CSS styling directly into the HTML code like this example:
<h1 style="color:blue;">A Blue Heading</h1>
Best regards
I have a LOT of asp:Labels and I want to change the size of the font for every single one.
I know that they are converted to <span> but I have other elements with text that get converted to spans which I don't want to change.
So how can I apply style to only the the spans generated from Labels all at once?
Please don't tell me I'll have to go through each one and apply a cssClass directly.
You can define a Skin for that. Think of Skin as a set of settings common for all controls of specific type. Skins do not exist on their own, but within a theme. Here is a walkthrough on how to create a theme from MSDN. I do not think it is reasonable to copy it here.
But to focus on your specific use case, go ahead and follow this walkthrough and create a theme with only a single skin defined like so:
<asp:Label runat="server" CssClass="CommonCssClass" />
Notice we do not use SkinID, so this will be applied to all Label controls.
Next go to the page and modify Page directive:
<%# Page Theme="YourThemeName" %>
That's it, this should apply skin defined in the theme to the labels on the page.
In fact I would make an argument that this is a better way to do similar changes to server side controls then trying to figure out how to capture resulting HTML with css selector. The latter puts your code into dependency on the generated markup, which is dangerous as ASP.NET does not always generate what you would expect. For example, Label does not always render as span.
I need to be able to add rows to a table dynamically with jQuery mobile. The rows consist of selection menus and input boxes. The code I have seems to work in pure jQuery and html but when I add the mobile stuff it stops working (the "added" select menus and input elements act as if the first row in the table is being clicked). I have a jsfiddle here. Does anyone have suggestions? Or an explanation of why jQuery mobile is breaking my code?
When you call clone on the tr, the cloned row is inserted verbatim into your DOM. In order to achieve the result you want, the new <select> needs to have a unique ID.
You should add some logic to ensure that the new <select> tag has a different ID, such as select-choice-3, select-choice-4, etc.