Wolf X Machina

Back to blog

DNNSharp Action Form + Bootstrap 4 Tweaks

Posted in DNN on December 6, 2019

I really like DNNSharp's Action Form module. Unfortunately they haven't kept up to date with making it completely compatible with Bootstrap 4. As I build all of my custom DNN Themes using Bootstrap 4, I need Action Forms to play along nicely.

This is a slightly advanced tutorial which presumes you have control over the skin and Action Form settings and are slightly comfortable with tweaking some basic CSS.

If you're using a DNN theme that uses Bootstrap 4 and you want to get DNN Sharp's Action Form working well, here are some helpful tweaks. 

Prerequisites

Typically these are the first options I configure when adding a new Action Form:

  1. General Settings > UI & Layout
    1. Template: bootstrap
    2. Label Align: Top
    3. Label Width: 12/12 columns
    4. Include Bootstrap: uncheck

The Core CSS

My CSS includes a few fixes to correct: columns, required field indicators, some simple spacing, checkbox/radio button styles, some conversions of icons to use Font Awesome 5, fix date and time picker styles, and fix the file upload table. This is meant as a sort of starter so you might need to adjust it for your own needs.

/* fix the column layouts */
.c-form .form-group {
  display: flex;
  margin: 0 -15px
}
@media (max-width:767px) {
  .c-form .form-group {
    flex-direction: column
  }
  .c-form .form-group .field-container {
    max-width: 100% !important
  }
}
@media (min-width:768px) {
  .c-form .form-group {
    flex-direction: row
  }
}

/* give required fields a red asterisk */
.c-form .form-group label.control-label.required:after {
  content: "*";
  display: inline-block;
  color: #FF0000;
  margin-left: 5px;
  font-size: 15px;
  line-height: 1em;
  vertical-align: top
}

/* simple margins for paragraphs inside form groups */
.form-group p {
  margin-bottom: 5px
}

/* checkbox and radio button styles */
.checkbox, .radio {
  margin-left: 0 !important
}
.checkbox label, .radio label {
  position: relative;
  padding-left: 30px
}
.checkbox label input, .radio label input {
  position: absolute;
  left: 0;
  top: 6px
}
.checkbox label span, .radio label span {
  position: relative;
  top: 1px;
  font-size: 17px
}

/* fix "display horizontally" for inline radio buttons and checkboxes */
.radio-inline,
.checkbox-inline {
    display: inline-flex;
    margin-right: 20px;
}

.radio-inline input,
.checkbox-inline input {
    margin-right: 5px;
}

/* convert glyphicon classes to FontAwesome 5 icons */

.glyphicon::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.glyphicon-chevron-left::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f104";
}

.glyphicon-chevron-right::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105";
}

.glyphicon-info-sign::before {
	font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f059";
}

/* give popovers style */
.popupOnHover {
	width: 15px;
	height: 15px;
	cursor: pointer;
}

/* fix date and time picker popup */
.fix-date-time .container-btn-vertical-center .btn.btn-default {
	padding: 0 20px;
	box-shadow: none;
	line-height: 42px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.datetime-picker-dropdown li.ng-scope .btn-group .btn {
	border: none;
	box-shadow: none;
}

/* fix file upload table */

.fileupload-buttonbar + table.table.files {
    margin-bottom: 0 !important;
    font-size: 13px;
}
.fileupload-buttonbar + table.table.files td {
    padding: 15px !important;
    border: none !important;
}

.fileupload-buttonbar + table.table.files td button.cancel {
    padding-left: 20px;
    padding-right: 20px;
    background: #d9534f;
    border-color: #d9534f;
    font-weight: 400 !important;
    font-size: 13px !important;
}
.fileupload-buttonbar + table.table.files td button.cancel:hover {
    background: #C03A36;
    border-color: #C03A36;
}

.fileupload-buttonbar .progress {
    margin-bottom: 0 !important;
}

Load Popper.js Earlier

Bootstrap 4 uses Popper.js. I noticed a problem where if you configure "Show Tooltips" under UI & Layout settings of General Settings in Action Form, then the tooltips don't appear. If you're configured your Action Form to use tooltips then you need to make sure Popper.js loads earlier in the skin. I use a tag that looks like this:

<dnn:DnnJsInclude runat="server" FilePath="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ForceProvider="DnnFormBottomProvider" Priority="0" />

Please note: If using tooltips in your Action Form, make sure to include the necessary icon CSS as the icons may not show up in Bootstrap 4 if you're not loading the Glyphicon set.

Bonus: Number the fields dynamically

I recently had a client who wanted the fields to be numbered. It would be a pain to add the numbers manually to each field as that requires updates if new fields were added or fields were reordered. So I made some simple CSS to handle that.

.c-form {
    counter-reset: my-awesome-counter;
}

.c-form .field-container {
    counter-increment: my-awesome-counter;
    position: relative;
}

.c-form .field-container .control-label::before {
    content: counter(my-awesome-counter) ". ";
    color: #666;
    font-weight: 400;
    display: inline-block;
    margin-right: 5px;
}

Hope this helps! DNN is pretty great but it could always be better. If you could use some help improving the interface or functionality of your DNN themes or modules, check out https://wolfxmachina.com/expert-dnn-development

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Theme picker

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More