I am trying to do something simple in KUIB.
In a blank view, I added a 'Custom HTML' component.
Inside of the 'Custom HTML' component, I added the following:
<fieldset>
<legend><i class="fa fa-address-book-o"></i> Start Time</legend>
<button type="submit" class="btn btn-info btn-xs top-right"><i class="fa fa-pencil"></i> Edit</button>
<form class="col-sm-12">
<div class="row">
<label for="custNum" class="col-sm-4">CustNum</label>
<input type="text" name="custNum" id="custNum" required="" class="k-textbox col-sm-8" />
</div>
<div class="row">
<label for="name" class="col-sm-4 col-md-3 col-lg-2">Name</label>
<input type="text" name="name" id="name" required="" class="k-textbox col-sm-8" />
</div>
</form>
</fieldset>
Before:
I like the old fieldset style instead of Bootstrap style, so I inserted the following in the 'app.custom.css'.
fieldset {
border: 1px solid rgb(204, 204, 204) !important;
padding: 0.4em !important;
margin: 0 0 0 0 !important;
-webkit-box-shadow: 10px #000;
box-shadow: 10px #000;
border-radius: 15px 3px 15px 15px;
}
legend {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0px 10px 0px 10px;
margin: 0;
border-bottom:none;
}
.top-right {
position: absolute;
top: 12px;
right: 16px;
}
After:
The KUIB blank view does not refresh or change, but the 'Preview' does reflect the change. If I inject the style in the Custom HTML, the KUIB blank view does refresh to the style. Why does the Kendo UI Builder not refresh based on 'Edit CSS' or 'app.custom.css'? Is this a feature or bug?
Also, is there a better way in doing this fieldset in KUIB using the available components?
Thanks,
Randy
