So I think I found the problem. The table default styling makes all margin
and padding equal zero. This is done a bit aggressively to prevent various
browser issues and it is blocking your style changes.
Nevertheless you can override these style declarations in the following way.
Add a prefix to your css class names
var *cssClassNames* = {
*'tableCell'*: 'myTable myBorder'};
and then change your css decelerations like this:
.myTable.myBorder {
border: 1px solid #6699FF;
font-size:11px;
*color*:#226180;
*padding*:135px;
margin:135px;
}
Let me know if it works
ChartMan
On Wed, Jul 1, 2009 at 9:57 AM, Ashish Agarwal <[email protected]>wrote:
> I am using the following code :
>
> var *cssClassNames* = {
> 'headerRow': 'subHhead',
> 'tableRow': 'tableRow',
> 'hoverTableRow': 'hoverTableRow',
> 'selectedTableRow': 'hoverTableRow',
> 'headerCell': 'subHhead',
> *'tableCell'*: 'myBorder'};
>
> var options = {'showRowNumber': false, 'allowHtml': true, 'cssClassNames':
> cssClassNames, 'alternatingRowStyle': false};
>
> and in CSS file .myBorder {
> border: 1px solid #6699FF;
> font-size:11px;
> *color*:#226180;
> *padding*:135px;
> margin:135px;
> }
>
> for above two properties 'color' and 'padding', I am not able to see the
> style sheet changes in my code. I am also not much sure is it "padding" or
> "cellpadding". You can refer my gadget xml and CSS file from the following
> links:
>
> https://ashish-dev.googlecode.com/svn/trunk/list_table_gadget.xml
>
> https://ashish-dev.googlecode.com/svn/trunk/ipathshala.css
>
> Thanks
> Ashish Agarwal
> On Tue, Jun 30, 2009 at 7:38 PM, ChartMan <[email protected]> wrote:
>
>> cell padding and spacing are not configurable via the api. You can however
>> add padding to all your cells by adding this style to tableCell.
>> For further specific questions please prepare a small html example in
>> which I can see the problems you are referring to.
>>
>>
>> On Tue, Jun 30, 2009 at 3:41 PM, Ashish Agarwal <
>> [email protected]> wrote:
>>
>>> Please also help me how can I set the cell spacing and cell padding in *
>>> google.visualization.Table.*
>>>
>>>
>>> On Tue, Jun 30, 2009 at 6:02 PM, Ashish Agarwal <
>>> [email protected]> wrote:
>>>
>>>> Thanks ChartMan, its working now. I have changed the CSS file and used
>>>> accordingly, but still table rows font color is not changing as per CSS,
>>>> other style sheet changes I am able to see.
>>>>
>>>>
>>>> On Tue, Jun 30, 2009 at 5:31 PM, ChartMan <[email protected]> wrote:
>>>>
>>>>> ok - now I understand. In the inline <style> you are using class name
>>>>> 'subHhead' where in the included css file your rules
>>>>> #Gadget subHhead
>>>>>
>>>>> Which means that this class applies to element with class=subHhead that
>>>>> are decedents of a dom element with id=Gadget.
>>>>> There is no such dom element in the gadgets DOM tree.
>>>>>
>>>>> Furthermore you are mixing node types and classNames, e.g. td is a node
>>>>> name and not a class name (hover is also reserved).
>>>>>
>>>>> Let me know if this makes sense,
>>>>>
>>>>> ChartMan
>>>>>
>>>>>
>>>>> On Tue, Jun 30, 2009 at 2:30 PM, Ashish Agarwal <
>>>>> [email protected]> wrote:
>>>>>
>>>>>> yeah, styles are not working, That's why I have to give the styles in
>>>>>> the gadget xml. If I removes the style classes from gadget xml , I am not
>>>>>> able to access them from external css file.
>>>>>>
>>>>>>
>>>>>> On Tue, Jun 30, 2009 at 4:36 PM, ChartMan <[email protected]>wrote:
>>>>>>
>>>>>>> I just loaded your gadget to my iGoogle page and inserted a data
>>>>>>> source url (a trix sheet) and go a table with the styles defined in
>>>>>>> your css
>>>>>>> file.
>>>>>>> Are you sure the styles are not working for you.
>>>>>>>
>>>>>>> ChartMan
>>>>>>>
>>>>>>>
>>>>>>> On Tue, Jun 30, 2009 at 12:21 PM, Ashish Agarwal <
>>>>>>> [email protected]> wrote:
>>>>>>>
>>>>>>>> Earlier in the code it was fake url. Please find the following
>>>>>>>> links:
>>>>>>>>
>>>>>>>> My gadget URL
>>>>>>>> http://ashish-dev.googlecode.com/svn/trunk/list_table_gadget.xml
>>>>>>>>
>>>>>>>> CSS url
>>>>>>>> http://ashish-dev.googlecode.com/svn/trunk/ipathshala.css
>>>>>>>>
>>>>>>>> Thanks
>>>>>>>> Ashish Agarwal
>>>>>>>>
>>>>>>>> On Tue, Jun 30, 2009 at 12:44 PM, ChartMan
>>>>>>>> <[email protected]>wrote:
>>>>>>>>
>>>>>>>>> Hi
>>>>>>>>>
>>>>>>>>> I am not able to access the stylesheet myself, it might be the case
>>>>>>>>> that the gadget is also not able to access the sheet.
>>>>>>>>> So either send me a link to your gadget that I can load and see why
>>>>>>>>> it fails; or
>>>>>>>>> 1) verify that the file is loaded to the page (you can use FireBug
>>>>>>>>> in Firefox or 'inspect element' in Chrome).
>>>>>>>>> 2) verify that your class name is applied to the table dom tree.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> Let me know how it goes,
>>>>>>>>>
>>>>>>>>> ChartMan
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tue, Jun 30, 2009 at 9:01 AM, Ashish Agarwal <
>>>>>>>>> [email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> Hi,
>>>>>>>>>>
>>>>>>>>>> I tried the following code to get the CSS in my gadget
>>>>>>>>>>
>>>>>>>>>> <Content type="html"><![CDATA[
>>>>>>>>>> <head>
>>>>>>>>>> <meta http-equiv="Content-Type"
>>>>>>>>>> content="text/html; charset=utf-8" />
>>>>>>>>>> <title>Time Table</title>
>>>>>>>>>> <script src="
>>>>>>>>>> http://www.google.com/jsapi"; type="text/javascript"></script>
>>>>>>>>>> <div id="tablediv"
>>>>>>>>>> style="overflow: auto;"> <img src="
>>>>>>>>>> http://www.google.com/ig/images/spinner.gif"; /></div>
>>>>>>>>>> *<link
>>>>>>>>>> href="**http://xyz.com/svn/trunk/designs/css/abc.css*<http://xyz.com/svn/trunk/designs/css/abc.css>
>>>>>>>>>> *" rel="stylesheet" type="text/css" />*
>>>>>>>>>> </head>
>>>>>>>>>> <body>
>>>>>>>>>>
>>>>>>>>>> The external css is having following styles:
>>>>>>>>>> #Gadget .subHhead {
>>>>>>>>>> background-color:#98BCCC;
>>>>>>>>>> color:#000000;
>>>>>>>>>> height:20px;
>>>>>>>>>> font-size:11px;
>>>>>>>>>> }
>>>>>>>>>> And I am assigning subHhead to headerRow .
>>>>>>>>>> var cssClassNames = {
>>>>>>>>>> 'headerRow': 'subHhead',
>>>>>>>>>> 'tableRow': 'td'};
>>>>>>>>>>
>>>>>>>>>> Added cssClassNames to options
>>>>>>>>>>
>>>>>>>>>> var options = {'showRowNumber': false, 'allowHtml': true,
>>>>>>>>>> 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
>>>>>>>>>>
>>>>>>>>>> Draw the table with the options
>>>>>>>>>> table.draw(data, options);
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> I used the above code in the xml given by
>>>>>>>>>> http://www.google.com/ig/modules/simple-table.xml. But, my
>>>>>>>>>> external CSS is not getting applied.
>>>>>>>>>>
>>>>>>>>>> Am I doing anything wrong? When I used the same styles in my xml,
>>>>>>>>>> I am able to see the changes.
>>>>>>>>>>
>>>>>>>>>> Another query is what all styles are available with google
>>>>>>>>>> visualization Table. From where can i get this information. From the
>>>>>>>>>> following link I see following styles
>>>>>>>>>>
>>>>>>>>>> http://code.google.com/apis/visualization/documentation/examples.html
>>>>>>>>>>
>>>>>>>>>> var cssClassNames = {
>>>>>>>>>> 'headerRow': 'italic-darkblue-font large-font bold-font',
>>>>>>>>>> 'tableRow': '',
>>>>>>>>>> 'oddTableRow': 'beige-background',
>>>>>>>>>> 'selectedTableRow': 'orange-background large-font',
>>>>>>>>>> 'hoverTableRow': '',
>>>>>>>>>> 'headerCell': 'gold-border',
>>>>>>>>>> 'tableCell': '',
>>>>>>>>>> 'rowNumberCell': 'underline-blue-font'};
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Thanks
>>>>>>>>>> Ashish Agarwal
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Mon, Jun 29, 2009 at 5:34 PM, ChartMan <[email protected]>wrote:
>>>>>>>>>>
>>>>>>>>>>> 1. Here is a good example on how to use css classes to configure
>>>>>>>>>>> the table. The class definitions can come from an external css file.
>>>>>>>>>>>
>>>>>>>>>>> http://code.google.com/apis/visualization/documentation/examples.html#custom_table_example
>>>>>>>>>>>
>>>>>>>>>>> 2. What is the html view of the table?
>>>>>>>>>>>
>>>>>>>>>>> ChartMan
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> On Mon, Jun 29, 2009 at 1:11 PM, Ashish Agarwal <
>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> Hello friends,
>>>>>>>>>>>>
>>>>>>>>>>>> I am using visualization API for creating a gadget which will
>>>>>>>>>>>> show
>>>>>>>>>>>> simple data table. I want to modify the structure of table using
>>>>>>>>>>>> external CSS file. How can I do that?
>>>>>>>>>>>>
>>>>>>>>>>>> I used the following link to modify the table
>>>>>>>>>>>> configuration
>>>>>>>>>>>>
>>>>>>>>>>>> http://code.google.com/apis/visualization/documentation/gallery/table.html#Configuration_Options
>>>>>>>>>>>> but I have to give the stylesheet code in the same file. I want
>>>>>>>>>>>> to use
>>>>>>>>>>>> external CSS file. Please help me.
>>>>>>>>>>>>
>>>>>>>>>>>> Second, is there any way to see the html view of table which
>>>>>>>>>>>> is
>>>>>>>>>>>> generated by google.visualization.Table.
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> Thanks
>>>>>>>>>>>> Ashish agarwal
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Regards,
>>>>>>>>>> Ashish Agarwal
>>>>>>>>>> Ph. 9250092550
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Regards,
>>>>>>>>> Ashish Agarwal
>>>>>>>>> Ph. 9250092550
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Regards,
>>>>>>> Ashish Agarwal
>>>>>>> Ph. 9250092550
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Regards,
>>>>> Ashish Agarwal
>>>>> Ph. 9250092550
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Regards,
>>>> Ashish Agarwal
>>>> Ph. 9250092550
>>>>
>>>>
>>>>
>>
>>
>> --
>> Regards,
>> Ashish Agarwal
>> Ph. 9250092550
>>
>> >>
>>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
![http://www.google.com/ig/images/spinner.gif"](https://www.google.com/ig/images/spinner.gif"){kind=link}