thanks :)- its working now..
On Wed, Jul 1, 2009 at 12:40 PM, ChartMan <[email protected]> wrote:
> 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
>>>
>>>
>>>
>
> >
>
--
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}