Dashboards & Visualizations

.HTML module Style Sheet not working ??

Motivator

Hi.

I am using a style for HTML module , in the application.css file like this.

.HTML { padding: 0px !important}

This is not working for me in I.E but i can its working mozilla.can you pls help to find a way to achieve this in I.E as well.

My dashboard code.

<view objectMode="viewconf" template="dashboard.html" autoCancelInterval="90" isPersistable="true" isSticky="true" isVisible="true">
   <label>MY Dashboard</label>
   <module name="AccountBar" layoutPanel="appHeader"/>
   <module name="AppBar" layoutPanel="navigationHeader"/>
   <module name="Message" layoutPanel="messaging">
      <param name="filter">*</param>
      <param name="clearOnJobDispatch">False</param>
      <param name="maxSize">1</param>
   </module>
   <module name="Message" layoutPanel="messaging">
      <param name="filter">splunk.search.job</param>
      <param name="clearOnJobDispatch">True</param>
      <param name="maxSize">1</param>
   </module>
   <module name="SideviewUtils" layoutPanel="viewHeader"/>
   <module name="TitleBar" layoutPanel="viewHeader">
      <param name="actionsMenuFilter">dashboard</param>
   </module>
   <module name="HTML" layoutPanel="panel_row1_col1">
      <param name="html">
         <![CDATA[
 <style type="text/css">
       .mainButtonTitle { font-size: 10pt; font-weight:bold; }
       .HiddenSavedSearch {padding: 0 !important;}
       .dashboardCell .SplunkModule {padding: 0 !important;}
        .SplunkModule {padding: 0 !important;}
        .HTML{ padding: 0 !important;  }  
</style>
<script language="JavaScript">
              function toggleVis(id)
              {
            if(document.getElementById("Flag").value==flag)
               {
                    var b = document.getElementById(id);
                    b.style.display = 'none';
                    b.style.visibility = 'hidden';
                    document.getElementById("Flag").value=0;
                }
            else
            {
                  var b = document.getElementById(id);
                    b.style.display = 'none';
                    b.style.visibility = 'hidden';

            }   
          }
              </script>
      <div  style="visibility:hidden; display:none">
            <input id="Flag" type="button"  value="0" name="Flag">
            </div>
]]>
      </param>
   </module>
   <module name="HiddenSearch" layoutPanel="panel_row1_col1_grp1" group="Top Level"  autoRun="True">
      <param name="Savedsearch">mysearch</param>
      <param name="groupLabel">Top Level</param>
      <module name="PostProcess" layoutPanel="panel_row2_col1_grp1" >
         <param name="search">
            <![CDATA[
          | stats avg(resptime) by channel
          ]]>
         </param>
         <module name="HTML">
            <param name="html">
               <![CDATA[
            <center>
             <br>
              <span class="mainButtonTitle">
                A
              </span><br>
              <input type="button"  onclick="toggleVis('tag1')" style="background-color:$results[0].colorcode$;color:#FFFFFF;" value="B2B" name="B2B">
              </center>
              ]]>
            </param>
         </module>
      </module>
      <module name="PostProcess" layoutPanel="panel_row2_col1_grp1" >
         <param name="search">
            <![CDATA[
          | stats avg(resptime) by channel
          ]]>
         </param>
         <module name="HTML">
            <param name="html">
               <![CDATA[
            <center>
             <br>
              <span class="mainButtonTitle">

                B
              </span><br>
              <input type="button"  onclick="toggleVis('tag2')" style="background-color:$results[0].colorcode$;color:#FFFFFF;" value="B2B" name="B2B">
              </center>
              ]]>
            </param>
         </module>
      </module>
      <module name="PostProcess" layoutPanel="panel_row4_col1_grp1" >
         <param name="search">
            <![CDATA[
          | stats avg(resptime) by DS,Gateway,Location,Environment
          ]]>
         </param>
         <module name="HTML">
            <param name="html">
               <![CDATA[
             <div id="tag1" style="display:none">
                   <center>
                     <br>
              <span class="mainButtonTitle">Drill down view of channel A</span><br>
          <table border="1" >
          <tr>
          <th style="background-color:blue;color:yellow"  align="center">DS</th align="center">      
          <th style="background-color:blue;color:yellow"  align="center">Gateway</th align="center">
          <th style="background-color:blue;color:yellow"  align="center">Location</th align="center">
          <th style="background-color:blue;color:yellow"  align="center">Environment<br>(VDC Or Legacy)</th align="center">

          </tr>
          <tr>
          <td align="center">$results[0].report_name$</td align="center">
          <td align="center">$results[0].gateway$</td align="center">
          <td align="center">$results[0].location$</td align="center">
            <td align="center">$results[0].environment$</td align="center">

          </tr>
                <tr>
          <td align="center">$results[1].report_name$</td align="center">
          <td align="center">$results[1].gateway$</td align="center">
          <td align="center">$results[1].location$</td align="center">
             <td align="center">$results[1].environment$</td align="center">

         </tr>
            <tr>
          <td align="center">$results[2].report_name$</td align="center">
          <td align="center">$results[2].gateway$</td align="center">
          <td align="center">$results[2].location$</td align="center">
             <td align="center">$results[2].environment$</td align="center">
          </tr>
             </table>
              </div>
        </center>
              ]]>
            </param>
         </module>
      </module>
      <module name="PostProcess" layoutPanel="panel_row2_col1_grp1" >
         <param name="search">
            <![CDATA[
         | stats avg(resptime) by DS,Gateway,Location,Environment
          ]]>
         </param>
         <module name="HTML">
            <param name="html">
               <![CDATA[
             <div id="tag2" style="display:none">
             <center><br><span class="mainButtonTitle">Drill down view of channel B</span><br>
             <table border="1" >
          <tr>
          <th style="background-color:blue;color:yellow"  align="center">DS</th align="center">      
          <th style="background-color:blue;color:yellow"  align="center">Gateway</th align="center">
          <th style="background-color:blue;color:yellow"  align="center">Location</th align="center">
          <th style="background-color:blue;color:yellow"  align="center">Environment<br>(VDC Or Legacy)</th align="center">
          </tr>
          <tr>
          <td align="center">$results[0].report_name$</td align="center">
          <td align="center">$results[0].gateway$</td align="center">
          <td align="center">$results[0].location$</td align="center">
                <td align="center">$results[0].environment$</td align="center">
          </tr>
                <tr>
          <td align="center">$results[1].report_name$</td align="center">
          <td align="center">$results[1].gateway$</td align="center">
          <td align="center">$results[1].location$</td align="center">
                <td align="center">$results[1].environment$</td align="center">
         </tr>
             <tr>
          <td align="center">$results[2].report_name$</td align="center">
          <td align="center">$results[2].gateway$</td align="center">
          <td align="center">$results[2].location$</td align="center">
                <td align="center">$results[2].environment$</td align="center">
          </tr>
              </table>
              </div>
        </center>
              ]]>
            </param>
         </module>
      </module>
   </module>
</view>

So on i have so many postprocess modules..say same layout layoutPanel="panelrow3col1_grp1" . Now when i click a button i am hiding the data in all the sub postprocess modules and showing only one at a time..but the thing since all the subpostprocess modules are defined on the same layout..each time i click a button my HTML panel view of the modules are moving up and down..to make it project at the same path..i have used this padding option in application.css , but its not working in Internet Explorer..can you pls suggest a way in acheiving this Internet Explorer..

Tags (3)
0 Karma

SplunkTrust
SplunkTrust

This doesn't sound like a problem with padding on the HTML module, but rather a problem with the padding on Splunk's HiddenPostProcess module. Sideview modules that are not supposed to be visible make sure to remove their own padding because this can introduce whitespace. I notice that Splunk's HiddenPostProcess module happens to be one of the core Splunk modules that neglects to do this. I think if you change your custom CSS to whack away the padding on HiddenPostProcess, it should work. Or you can just switch to using the Sideview PostProcess module instead, since it doesn't have that troublesome padding in the first place.

Also is it possible it's just a browser-cache problem? Splunk caches static files very aggressively so if you make changes in application.css you have to be explicitly clearing your browser cache - clicking 'refresh' will not be sufficient (although depending on your browser you can hold down shift or ctrl while you click refresh and that can secretly clear the cache before the refresh).

Also, there are a number of strange mistakes in your view XML.

  • you have an autoRun="True" nested inside another autoRun="True". You should never do this because a) it never does anything useful, b) it will always slow down your view, and c) in some cases it can cause incredibly confusing behavior where tokens don't seem to be getting passed around correctly.

  • The HiddenSearch module has no Savedsearch param, so that should be generating a big error in your UI to that effect.

And I took the liberty of cleaning up your XML so that it rendered properly, even though I know you've used this site enough to know that simply indenting code samples with 4 spaces will make it display properly; please do this in the future so your questions are easier to read.

UPDATE:::

Now that you've posted your code, the problem is just a typo on the first line of your CSS.

.mainButtonTitle { font-size: 10pt; font-weight:bold; };

That semicolon on the end is a syntax error, and that syntax error will cause the CSS engine in IE to ignore the HiddenSavedSearch style on the next line. It's possible firefox and chrome are tolerant of this basic mistake but I know that IE is not. In general the whitespace and formatting of your actual code is pretty bad - you should really work on making this stuff cleaner so it's easier to spot your own mistakes. If you spent 3 days chasing this typo, consider spending a few minutes here and there cleaning up your code and indentation to make it more readable.

0 Karma

Motivator

Until the search query loads in I.E , the desired effect was working fine..but when the search is loaded ..the PostProcess module is moving up and down...

0 Karma

Motivator

even removing semicolon ..didnt helped me in I.E . its workin only in Mozilla.. by the way i am using I.E 8.0 . is it the problem with I.E version .. 😞


class="SplunkModule HTML" id="HTML9020" s:parentmodule="#PostProcess89189"

in I.E this statement in div tag throwing me an invisible line...but in mozilla its not...

0 Karma

SplunkTrust
SplunkTrust

I see your problem now. It's a simple typo in your CSS. I have updated my answer.

0 Karma

Motivator

actually i have posted after formatting in notepad++ only..but i dnt know y this is happening .sry for tat..could you pls me here for now

0 Karma

SplunkTrust
SplunkTrust

Again, I know that you know how to post code samples so that the formatting works. Please don't post badly formatted code all the time, cause you're forcing us all to fix everything for you.

0 Karma

Motivator

hi can you pls help me with my code..

0 Karma

SplunkTrust
SplunkTrust

I'm sorry. I have been helping you. You haven't posted your entire XML and your description of the problem is basically " my HTML panel view of the modules are moving up and down". This is not a complete description. I have suggested that you have yet to discover the element that is introducing the padding, and that you should use developer tools to solve what sounds like a basic CSS-development problem. Beyond this I don't know how I could have helped you any more.

0 Karma

Motivator

i am using firebug only to inspect in mozilla i couldnt see any issues..i am getting the desired result. when comes to i.e its not working....i have used developer tools of I.E version also.. can you pls help me in this...almost i have wasted 3 days of time in this.

0 Karma

SplunkTrust
SplunkTrust

Make sure you're using something like Firebug to inspect the living page DOM because I suspect the elements causing the jitter behavior on the page are not the elements you suspect. You haven't actually posted all of your module XML and my guess is that hidden in the "..." are other modules that have padding. However this is just basic CSS troubleshooting. If you're going to step into this world and write your own custom JS and custom CSS, I'm afraid you have to do a little more of the basic debugging yourself.

0 Karma

Motivator

I have changed the HiddenPostProcess to PostProcess , even then no Luck.. I am using HiddenSavedSearch and SavedSearch Modules.....Am i missing something ??

0 Karma

SplunkTrust
SplunkTrust

Sure.

.HiddenPostProcess { padding: 0px !important}

and if you want to go the other way and replace HiddenPostProcess with PostProcess, replace <module name="HiddenPostProcess"> with <module name="PostProcess">. hth.

0 Karma

Motivator

Can you please give the snippet for whacking away the HiddenPostProcess Module pls..

0 Karma