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}