Splunk Dev
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

HTML/CSS code not adding in dashboard

chandrasekhar46
Loves-to-Learn Everything
‎06-17-2024 02:10 AM

i am creating a dashboard view using HTML/CSS code but after saving the dashboard is showing in text format only 

below is the code and dashboard how is looking 

<dashboard>
<label>Manual-supression</label>
<description>Please enter the values for your One-Time-Blackout.</description>
<row>
<panel>
<html>
<![CDATA[
<style>
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container h1 {
color: #4CAF50;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group input[type="datetime-local"] {
padding: 8px;
}
.save-button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
font-size: 16px;
}
</style>
<div class="container">
<h1>One-Time-Blackout</h1>
<div class="form-group">
<label for="blackoutFilter">Blackout Filter</label>
<input type="text" id="blackoutFilter" placeholder="Please enter a blackout filter or a blackout filter list separated by commas.">
</div>
<div class="form-group">
<label for="startDate">Start Date and Time</label>
<input type="datetime-local" id="startDate">
</div>
<div class="form-group">
<label for="endDate">End Date and Time</label>
<input type="datetime-local" id="endDate">
</div>
<div class="form-group">
<label for="timeZone">Time Zone</label>
<select id="timeZone">
<option value="UTC+0">UTC +0h</option>
<!-- Add other time zones as needed -->
</select>
</div>
<div class="form-group">
<label for="blackoutActive">Blackout Active</label>
<select id="blackoutActive">
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" placeholder="Additional information about this entry."></textarea>
</div>
<button class="save-button">Save</button>
</div>
]]>
</html>
</panel>
</row>
</dashboard>

 

O/p looks in text format:

 

Manual-supression

Please enter the values for your One-Time-Blackout.

<style> .container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .container h1 { color: #4CAF50; text-align: center; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-weight: bold; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-group input[type="datetime-local"] { padding: 8px; } .save-button { display: block; width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 16px; } </style> <div class="container"> <h1>One-Time-Blackout</h1> <div class="form-group"> <label for="blackoutFilter">Blackout Filter</label> <input type="text" id="blackoutFilter" placeholder="Please enter a blackout filter or a blackout filter list separated by commas."> </div> <div class="form-group"> <label for="startDate">Start Date and Time</label> <input type="datetime-local" id="startDate"> </div> <div class="form-group"> <label for="endDate">End Date and Time</label> <input type="datetime-local" id="endDate"> </div> <div class="form-group"> <label for="timeZone">Time Zone</label> <select id="timeZone"> <option value="UTC+0">UTC +0h</option> <!-- Add other time zones as needed --> </select> </div> <div class="form-group"> <label for="blackoutActive">Blackout Active</label> <select id="blackoutActive"> <option value="true">True</option> <option value="false">False</option> </select> </div> <div class="form-group"> <label for="description">Description</label> <textarea id="description" placeholder="Additional information about this entry."></textarea> </div> <button class="save-button">Save</button> </div>

 

 

0 Karma
Reply

ITWhisperer
SplunkTrust
SplunkTrust
‎06-17-2024 02:30 AM

Remove the CDATA bracketing - it is not required

0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Automating Threat Operations and Threat Hunting with Recorded Future

    Automating Threat Operations and Threat Hunting with Recorded Future June 29, 2026 | Register   Is your ...

Keep the Learning Going with the New Best of .conf Hub

Hello Splunkers, With .conf26 getting closer, there’s already a lot of excitement building around this year’s ...

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...