Jump to content

multi-column checkbox display via API not working

Peter Falkenberg Brown

By Peter Falkenberg Brown,
in API & Templates

 Share

Recommended Posts

Peter Falkenberg Brown Sr. Member

Peter Falkenberg Brown

Posted
Posted

Hello Folks,

I'm stuck on getting checkboxes to display in multiple columns in a front-end form, via the API.

I've set the field to display in 3 columns, and it does so correctly in the back end admin page in edit mode.

I've copied the InputfieldCheckboxes* CSS classes from the wire directories, and when I look at the source it all looks okay, compared to the admin source page, but the checkboxes in the front end only display in one column.

Has anyone run into this? I'm sure I'm missing something, but I haven't figured it out yet.

Thanks!

Peter

Link to comment
Share on other sites
Peter Falkenberg Brown Sr. Member

Peter Falkenberg Brown

Posted
  • Author
Posted

Hi Harmster,

Yes, here's some. My edit routine clicks through an array of field names, processes them, and then replaces a tag in an html template with the results of each field.

Here's the code that processes each field:

$inputfields = $page->getInputfields();

foreach ( $field_array as $field_name => $display_status )
      {
      $field_tag      = ':!:' . $field_name . ':!:';

      if ( $display_status == 'display_only' )
            {
            $field       = $fields->get("$field_name");

            if ( !@include "./inc_view_fields_parse_types_code.php" ){echo $include_error; exit;}
            }
      else
            {
            $page->of(false);

            $field          = $inputfields->get("$field_name");
            $field_value    = $field->render();
            }

      $field_template = str_replace($field_tag, $field_value, $field_template);
      }

The specific code includes these two lines:

            $field          = $inputfields->get("$field_name");
            $field_value    = $field->render();

In my CSS file, I copied the classes from wire for the checkboxes.

When I look at the page source, and compare the code around the fields in my API app, versus the code around the same fields in the Admin, it all looks very similar.

I believe I must be missing some of the critical .js and/or .css files that the admin side uses.

=> I also need to use the admin popup calendar in a date field, so I'm thinking that it would be very, very helpful to get some documentation on which files can and should be included, from the core wire admin side, in a front end api app, that would enable one to use all the nifty things that the admin has.

=> One concern is that the css classes might conflict with app-specific classes.

Is it as simple as including the following css and js file calls that one can see in the admin source (on an edit page)?

	<link type='text/css' href='/wire/templates-admin/styles/main.css?v=2' rel='stylesheet' />
	<link type='text/css' href='/site/modules/HelperFieldLinks/HelperFieldLinks.css' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Process/ProcessPageEdit/ProcessPageEdit.css?v=102' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.css?v=103' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Jquery/JqueryFancybox/JqueryFancybox.css?v=126' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Process/ProcessPageList/ProcessPageList.css?v=102' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Markup/MarkupAdminDataTable/MarkupAdminDataTable.css?v=101' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldPageName/InputfieldPageName.css?v=104' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css?v=103' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldPage/InputfieldPage.css?v=102' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css?v=100' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldFile/InputfieldFile.css?v=100' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.css?v=100' rel='stylesheet' />
	<link type='text/css' href='/wire/modules/Process/ProcessPageSearch/ProcessPageSearch.css?v=101' rel='stylesheet' />
	<link type='text/css' href='/wire/templates-admin/styles/inputfields.css' rel='stylesheet' />
	<link type='text/css' href='/wire/templates-admin/styles/ui.css?v=2' rel='stylesheet' />

	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="/wire/templates-admin/styles/ie.css" />
	<![endif]-->	

	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="/wire/templates-admin/styles/ie7.css" />
	<![endif]-->

	
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=183'></script>
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=192'></script>
	<script type='text/javascript' src='/wire/modules/Process/ProcessPageEdit/ProcessPageEdit.js?v=102'></script>
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js?v=103'></script>
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryFancybox/JqueryFancybox.js?v=126'></script>
	<script type='text/javascript' src='/wire/modules/Process/ProcessPageList/ProcessPageList.js?v=102'></script>
	<script type='text/javascript' src='/wire/modules/Markup/MarkupAdminDataTable/MarkupAdminDataTable.js?v=101'></script>
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryTableSorter/JqueryTableSorter.js?v=203'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldPageName/InputfieldPageName.js?v=104'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldPageTitle/InputfieldPageTitle.js?v=101'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js?v=103'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldPage/InputfieldPage.js?v=102'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.js?v=358'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.5.8/tiny_mce.js'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js?v=100'></script>
	<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldFile/InputfieldFile.js?v=100'></script>
	<script type='text/javascript' src='/wire/modules/Process/ProcessPageSearch/ProcessPageSearch.js?v=101'></script>
	<script type='text/javascript' src='/wire/templates-admin/scripts/inputfields.js'></script>
	<script type='text/javascript' src='/wire/templates-admin/scripts/main.js?v=2'></script>

I've assumed that it couldn't be that easy :-), and that doing so could cause all kinds of conflicts.

But it sure would be nice to be able to easily use all those nifty admin tools, etc.

Unfortunately, I'm not a Javascript or CSS guru. I sort of muddle through.

Yours,

Peter

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

I guess you need also some of the inputfields.css and maybe main.css of the admin. Look for some *ColumnWidth classes. Also maybe worth mentioning that some of the admin css only works when you have your content in a ".content". 

Link to comment
Share on other sites
  • 2 weeks later...
Peter Falkenberg Brown Sr. Member

Peter Falkenberg Brown

Posted
  • Author
Posted

Dear Soma,

Thanks for your help. I finally sorted it out by using all of the css and js files from the admin and other things, and then taking each one away until it was clear what was required (well, I did that for the calendar popup). So here's my report.

=========================================================

* Calendar popup via the API in the FrontEnd:

=========================================================

It needed these files in the header:

<link type='text/css' href='/site/templates-admin/styles/JqueryUI/JqueryUI.css' rel='stylesheet' />
<link type='text/css' href='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css?v=103' rel='stylesheet' />

<script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=183'></script>
<script type='text/javascript' src='/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=192'></script>
<script type='text/javascript' src='/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js?v=103'></script>
<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js?v=103'></script>
<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js'></script>

=========================================================

* Multi-column checkboxes via the API in the FrontEnd:

=========================================================

I had to wrap my field in a ul tag, like this:

      <ul class='Inputfields'>
      :!:domains:!:
      </ul>

Then, I copied a number of css elements from the wire dir that I probably should go through and isolate and determine

which ones are really necessary for the checkboxes. But here's what I copied into my css file:

/**********************************************************************************************
 * ProcessWire Admin Control Panel - Skyscraper Theme - inputfields.css
 *
 * This file provides common styling for ProcessWire inputfields. All other Inputfield styles
 * are provided by the Inputfield modules themselves.
 *
 * Copyright 2012 by Ryan Cramer
 *
 */

.Inputfields fieldset,
.Inputfields input,
.Inputfields select,
.Inputfields textarea,
.Inputfields label {
	/* reset */
	margin: 0;
	padding: 0;
}

.Inputfields,
.Inputfields .Inputfield,
.Inputfields label,
.Inputfields input,
.Inputfields select,
.Inputfields textarea,
.Inputfields table {
	font-size: 12px;
}

.Inputfields input,
.Inputfields select,
.Inputfields textarea {
	max-width: 100%;
}

.InputfieldForm .Inputfields,
.InputfieldForm .Inputfields > .Inputfield {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
	.InputfieldForm .Inputfields .Inputfields {
		/* nested .Inputfields list needs no bottom margin since it'll already be offset from the parent's padding */
		margin-bottom: 0;
	}

	.Inputfields > .Inputfield {
		display: block;
		clear: both;
	}

.Inputfields > .Inputfield > .ui-widget-content {
	/* the Inputfield's content, padded from the borders */
	padding: 1em;
}

.Inputfields .ui-widget-header {
	/* typically the Inputfield's <label> */
	padding: 0.25em 0 0.25em 1em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none; /* prevent selection of this element */
}

.Inputfields label {
	/* label usually the same as the .ui-widget-header, but this applies to other labels too */
	display: block;
}

/**
 * Tweaks specific to percentage width floated fields
 *
 */

.InputfieldForm .Inputfields > .InputfieldColumnWidth {
	/* an Inputfield that has a percentage width assigned to it */
	float: left;
	clear: none;
	margin-top: 0;
	margin-left: 1%;
}
	.InputfieldForm .Inputfields .InputfieldColumnWidthFirst,
	.InputfieldForm .Inputfields .InputfieldColumnWidth + .InputfieldSubmit {
		/* first Inputfield with a percent width... */
		/* ...or the last percentage-width Inputifeld before the submit button */
		clear: both;
		margin-left: 0;
	}

/**
 * Margin and padding tweaks to prevent doubled visual whitespace
 *
 */

.InputfieldForm .Inputfields > .Inputfield > .ui-widget-content > *:first-child,
.InputfieldForm .Inputfields > .Inputfield > .ui-widget-content > div > *:first-child,
.InputfieldForm .Inputfields > .Inputfield:first-child {
	/* first child element of an Inputfield or it's content needs no top margin since it is already padded */
	margin-top: 0;
}

.InputfieldForm .Inputfields .Inputfields > .Inputfield:last-child,
.InputfieldForm .Inputfields > .Inputfield > .ui-widget-content > *:last-child {
	/* last child element in an Inputfield content needs no margin since it is already padded */
	margin-bottom: 0;
}
	.InputfieldForm .Inputfields > .Inputfield > .ui-widget-content .Inputfields.ui-helper-clearfix:last-child {
		/* prevents extra space in the situation described by the selector */
		/* example: the page editor sort settings box */
		margin-bottom: -1em !important;
	}

/**
 * Inputfield states (collapsd vs. open, etc.)
 *
 */

.Inputfields .InputfieldStateToggle {
	cursor: pointer;
}
	.Inputfields .InputfieldStateToggle span.ui-icon {
		/* the open/close icon that goes with most Inputfields */
		float: right;
		padding-right: 0.25em;
	}

	.Inputfields > .InputfieldStateCollapsed .ui-widget-header {
		/* collapsed Inputfields appear sightly faded */
		opacity: 0.6;
	}
	.Inputfields > .InputfieldStateCollapsed .ui-widget-header:hover {
		/* when hovering, they are no longer faded */
		opacity: 1.0;
	}

	.Inputfields > .InputfieldStateCollapsed .ui-widget-content {
		/* collapsed Inputfields don't show their content (only header) */
		display: none;
	}

.InputfieldForm .Inputfields .InputfieldStateError {
	/* borders can break floated columns, so we avoid borders here */
	border: none;
}

.InputfieldStateRequired > label.ui-widget-header:first-child:after {
	content: ' *';
}

/****************************************************************************
 * Specific Inputfield types
 *
 * Defined here rather than as separate CSS files because their styles are
 * shared or there may be relationships with other Inputfields
 *
 */

.Inputfields .InputfieldHidden {
	display: none;
}

/**
 * Buttons
 *
 */

.Inputfields .InputfieldSubmit,
.Inputfields .InputfieldButton {
	/* enable horizontal stack of buttons */
	clear: none;
}
	.Inputfields .InputfieldSubmit .ui-widget-content,
	.Inputfields .InputfieldButton .ui-widget-content {
		/* we don't need our visual furniture for buttons */
		padding: 0;
		background: none;
		border: none;
	}

	.Inputfields .InputfieldSubmit .ui-widget-header,
	.Inputfields .InputfieldButton .ui-widget-header {
		/* no need for a header with buttons */
		display: none;
	}

/**
 * Text/Textarea fields
 *
 */

.Inputfields textarea,
.InputfieldMaxWidth {
	/* full width fields */
	width: 100%;
}
	.Inputfields textarea {
		display: block;
	}

/****************************************************************************
 * Render Value Mode
 *
 * Used when only values are being rendered in the form (no inputs)
 *
 */

.InputfieldRenderValueMode .InputfieldSelect li,
.InputfieldRenderValueMode .InputfieldRadios li,
.InputfieldRenderValueMode .InputfieldCheckboxes li {
        margin: 0;
}

.InputfieldRenderValueMode .InputfieldSubmit,
.InputfieldRenderValueMode .InputfieldButton {
	display: none;
}

.InputfieldCheckboxes ul li {
        /* we don't need checkboxes/radios to have bullets, etc. */
        list-style: none !important;
	/* no need for top/bottom margins in a group of checkboxes or radios */
	margin: 0 !important;
}

.InputfieldCheckboxes table,
.InputfieldCheckboxesColumns,
.InputfieldCheckboxesFloated {
	width: 100%;
}

.Inputfields .InputfieldCheckboxesFloated li,
.Inputfields .InputfieldCheckboxesColumns li {
	display: block;
	float: left;
}

.Inputfields .InputfieldCheckboxesFloated li {
	padding-right: 1em;
}

.inputfields .InputfieldCheckboxesColumns li {
	padding-right: 1%;
	padding-bottom: 1%;
}

Thanks again for your help.

Peter

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...