Hello Everyone,
I need to style a ui page in service now. I did it but its not coming as per expectation as I have little knowledge on HTML & CSS. Please look into the screenshot below, my requirement is this container should come as a pop-up. But some error is is below:
1. There is too much space between header and container
2. Background color should be grey and inside container color should be white,but its coming like grey inside the container.
3. Fields should come in a proper way( first name & last name should be in a single row.)
What code i wrote :
HTML
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
#show-updates-dropdown
{
background-color: #F5F5F5 !important;
display: inline-block;
padding: 10px 20px !important;
border: 1px solid transparent !important;
font-size: 14px !important;
line-height: 16px !important;
font-weight: 500 !important;
color: white !important;
}
.fc h2 {
margin-top: 5px;
font-size: 20px !important;
}
.fc-today {
background: #C2DFFF !important;
border: none !important;
}
.fc-center {
padding: 5px;
}
hr{
margin: 0px !important;
}
.title
{
font-size:20px !important;
margin-bottom: 0.25px !important;
}
.row {
margin-right: 0px !important;
margin-left: 0px !important;
}
.status
{
font-size:15px !important;
}
.font-12
{
font-size: 12px !important;
}
.font-13
{
font-size: 13px !important;
}
.font-14
{
font-size: 14px !important;
}
.font-15
{
font-size: 15px !important;
}
.font-16
{
font-size:16px !important;
}
.font-17
{
font-size:17px !important;
}
.font-18
{
font-size: 18px !important;
}
.custom-header-container
{
margin-bottom: 25px !important;
font-size: 16px !important;
}
.bold-links
{
font-weight: bold;
font-size: 13px !important;
//color: #3498db !important;
}
p.ex1 {
padding-left: 100px;
}
box-shadow: 2px 2px 5px #888888 !important;
}
</style>
<body style="background-color:WhiteSmoke" class="font-16 index status-none" data-animation="false">
<div class="layout-content status status-index starter">
<div class="custom-header-container">
<g:macro_invoke macro="feed_header" />
</div>
</div>
<div class="container">
<!-- Dynamic Content -->
<div class="row" id="container">
<div class="col-md-8 col-md-offset-2 border-radius" style="background-color: white !important; padding-bottom: 50px; border: 1px solid #9E9E9E;">
<p></p>
<div class="row">
<span class="p.ex1" Style= "padding-left: 100px" style="color: #6a6b6c;">
<b>Feedback</b>
</span>
<g:ui_form>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<g:ui_choice_input_field id="u_cns_tell_us_what_you_think" name="Tell us what you think" label="${gs.getMessage('Tell us what you think...')}"> <option value="none">${gs.getMessage('--None--')}</option> <option value="1">1</option>
<option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </g:ui_choice_input_field><br/>
<label style="display: block;">First Name</label>
<input type="text" name="u_cns_first_name" id="fname" value = ""/><br/>
<label style="display: block;">Last Name</label>
<input type="text" name="u_cns_last_name" id="lname" value = ""/><br/>
<label style="display: block;">Email</label>
<input type="text" name="u_cns_email" id="email" value = ""/><br/>
<label style="display: block;">Comments</label>
<input type="text" name="u_cns_comments" id="comments" value = ""/><br/>
<g:dialog_button onclick="saveValues()" type="button" class="btn">Submit</g:dialog_button>
</g:ui_form>
</div>
</div>
</div>
</div>
</body>
</j:jelly>
Any help on this would be greatly appreciated or anyone have any code regarding this format.
Thanks,
Anu
