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!

What’s New in Splunk AI: Volume 02

Welcome to the second edition of “What’s New in Splunk AI” where we look at the latest and greatest updates, ...

Best Practices: Splunk auto adjust pipeline queue

When you enable autoAdjustQueue in Splunk, maxSize should be understood as the queue size Splunk starts with ...

Laser Bananas and Edge Hubs: Exploring Operational Technology (OT) Data Through a ...

  OT is a different environment to traditional IT and can have interesting challenges when interfacing the ...