Simple Fieldset With CSS Styling - Forum - Kendo UI Builder - Progress Community

Simple Fieldset With CSS Styling

 Forum

Simple Fieldset With CSS Styling

This question is answered

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
Verified Answer
  • The designer in KUIB is not WYSIWYG since it would be much harder to support multiple web app frameworks if the design canvas tried to be truly WYSIWYG. Additionally it does not try to run the custom code in the designer.

    As long as you see the correct behavior at runtime, you are doing your custom code correctly.

    Thanks

    -Shelley

All Replies
  • The designer in KUIB is not WYSIWYG since it would be much harder to support multiple web app frameworks if the design canvas tried to be truly WYSIWYG. Additionally it does not try to run the custom code in the designer.

    As long as you see the correct behavior at runtime, you are doing your custom code correctly.

    Thanks

    -Shelley