Forums

Where and how do i style the check box group so that the check box will align correctly to its first line instead of its text, when long or when the screen is narrow, getting pushed down below the check box? If i don't check the align-right button, Please refer to the attached image.

I am using J!2.5.10 with the latest CF and JS Wright template with responsive option enabled. Thanks in advance.

Hi phicts,

It's hard to say - all kinds of things start to interact when you have long texts like that. Please post a link to the form so I can take a quick look.

Bob

It's here for now, http://environews.tk/ssc-lep-2013

By the way, i've read your posts on the issue relative to Bootstrap though I haven't tried actually implementing it. Besides, I tried switching the form page to J!2.5's default templates and each one showed the same result - when the option's text is too long, it gets pushed down below the checkbox. 😟

Thanks Bob.

Hi phicts,

This proves to be tricky and I don't think that it is possible with the separate labels and inputs that ChronoForms creates. If you change this so that the labels wrap around the inputs then it becomes possible to tweak the CSS a little and get a result that looks OK.

[attachment=0]27-04-2013 09-20-03.png[/attachment]

I've posted an edited version of the HTML for this CheckBox Group below. If you copy and paste this into a Custom Element element and check the Pure Code box it should work in your form.

There is one more wrinkle with the CSS which treats the first label differently and makes it bold. I've added an empty label near the beginning that I hope will fix that. If it doesn't more CSS tweaking may be required.

Bob

<div style="" id="objectionclause1_container_div" class="ccms_form_element cfdiv_checkboxgroup label_over radios_over">
  <label>
    I object to the following proposals in the draft Sutherland Shire Local
    Environmental Plan (LEP) 2013 *
  </label>
  <input type="hidden" alt="ghost" value="" name="objectionclause">
  <div style="float:left; clear:none;">
    <label />
    <label for="objectionclause_0">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_0"
      title="" value="• The LEP will irreversibly change the character of the Shire."
      class="validate['group[38]']">
      The LEP will irreversibly change the character of the Shire.
    </label>
    <label for="objectionclause_1">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_1"
      title="" value="• There will be no right of objection if development complies with the LEP."
      class="validate['group[38]']">
      There will be no right of objection if development complies with the LEP.
    </label>
    <label for="objectionclause_2">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_2"
      title="" value="• More than 15,000 mostly high density additional dwellings. Thousands of extra cars will clog Shire roads and parking."
      class="validate['group[38]']">
      More than 15,000 mostly high density additional dwellings. Thousands of
      extra cars will clog Shire roads and parking.
    </label>
    <label for="objectionclause_3">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_3"
      title="" value="• 5,500 additional high density dwellings within 800 metres of centres - is more than double the target set by State Government."
      class="validate['group[38]']">
      5,500 additional high density dwellings within 800 metres of centres -
      is more than double the target set by State Government.
    </label>
    <label for="objectionclause_4">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_4"
      title="" value="• Additional high density dwellings beyond 800m radius – will further increase congestion."
      class="validate['group[38]']">
      Additional high density dwellings beyond 800m radius – will further
      increase congestion.
    </label>
    <label for="objectionclause_5">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_5"
      title="" value="• The minimum height of units increased to 4 storeys with 6 storeys the height preferred by Council - loss of amenity for streets from tall, bulky buildings."
      class="validate['group[38]']">
      The minimum height of units increased to 4 storeys with 6 storeys the
      height preferred by Council - loss of amenity for streets from tall, bulky
      buildings.
    </label>
    <label for="objectionclause_6">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_6"
      title="" value="• 13,346 square metres of public open space in Waratah Park, Sutherland proposed for 9 storey buildings. No additional public open space provided under the LEP."
      class="validate['group[38]']">
      13,346 square metres of public open space in Waratah Park, Sutherland
      proposed for 9 storey buildings. No additional public open space provided
      under the LEP.
    </label>
    <label for="objectionclause_7">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_7"
      title="" value="• No minimum lot size for unit, townhouse and dual occupancy development."
      class="validate['group[38]']">
      No minimum lot size for unit, townhouse and dual occupancy development.
    </label>
    <label for="objectionclause_8">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_8"
      title="" value="Units and townhouses allowed on single lots - amalgamation of lots not required."
      class="validate['group[38]']">
      Units and townhouses allowed on single lots - amalgamation of lots not
      required.
    </label>
    <label for="objectionclause_9">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_9"
      title="" value="• Permitting undersized and single lots will encourage an excessive amount of high density of poor design with adverse impacts on neighbours."
      class="validate['group[38]']">
      Permitting undersized and single lots will encourage an excessive amount
      of high density of poor design with adverse impacts on neighbours.
    </label>
    <label for="objectionclause_10">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_10"
      title="" value="• 3 storey townhouses and 3 storey houses permitted. 2 storey height limit removed leading to loss of privacy, overlooking neighbours."
      class="validate['group[38]']">
      3 storey townhouses and 3 storey houses permitted. 2 storey height limit
      removed leading to loss of privacy, overlooking neighbours.
    </label>
    <label for="objectionclause_11">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_11"
      title="" value="• Increases in floor space in all low density zones. Larger houses with bigger foot prints and smaller backyards reduce privacy and amenity."
      class="validate['group[38]']">
      Increases in floor space in all low density zones. Larger houses with
      bigger foot prints and smaller backyards reduce privacy and amenity.
    </label>
    <label for="objectionclause_12">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_12"
      title="" value="• (Green) landscape area requirement reduced from a range of 40%-55% to 25%-30% –  allows no room to plant trees."
      class="validate['group[38]']">
      (Green) landscape area requirement reduced from a range of 40%-55% to
      25%-30% – allows no room to plant trees.
    </label>
    <label for="objectionclause_13">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_13"
      title="" value="• Adverse impacts from increased floor space together with reduced landscaped area are: 1. Loss of Shire’s tree canopy and loss of privacy. 2. Loss of habitat for wildlife. 3. Loss of native species, and 4. Increased stormwater runoff – flooding of dwellings, pollution of waterways."
      class="validate['group[38]']">
      Adverse impacts from increased floor space together with reduced landscaped
      area are: 1. Loss of Shire’s tree canopy and loss of privacy. 2. Loss of
      habitat for wildlife. 3. Loss of native species, and 4. Increased stormwater
      runoff – flooding of dwellings, pollution of waterways.
    </label>
    <label for="objectionclause_14">
      <input type="checkbox" name="objectionclause[]" id="objectionclause_14"
      title="" value="• The largest increase in permitted house size and largest decrease in landscaped area are in waterfront and environmentally sensitive areas. This will devastate the tree canopy and the scenic beauty of our foreshores."
      class="validate['group[38]']">
      The largest increase in permitted house size and largest decrease in landscaped
      area are in waterfront and environmentally sensitive areas. This will devastate
      the tree canopy and the scenic beauty of our foreshores.
    </label>
  </div>
  <div class="clear"></div>
  <div id="error-message-objectionclause"></div>
</div>

I'll try to implement your code Sir. I'll be back in a while. I hope you can hold on. Thank you very much for all the extra effort. 8)

Could you take a look at the actual output now?
http://environews.tk/index.php?option=com_chronoforms&chronoform=SSCLEP2013Submission

Please scroll down to below the Captcha field to see what it looks like.

Is the code to fix the first option getting bold already included in the code you provided or do i have to add it myself?

Once I delete the current check box group and replace it with your code, how would the data be sent via email and stored on the database?

Hi phicts,

I think you need two bits of extra CSS:

.cfdiv_checkboxgroup label:first-child {
  font-weight: normal !important;
}
#objectionclause1_container_div input {
  margin: 6px 12px;
}

You can also remove my empty label <label></label> as it isn't working.

The form should work in exactly the same way - the Form HTML here is identical to that generated by ChronoForms apart from the placing of the label tags. But best to make a copy of the form for backup before making the change.

Bob

Feedback: when I check or uncheck any of the options provided in your code, the first option gets affected either by being also ticked or non-ticked and the screen display always move back to the first option as if every ticking is linked to the first option. :-(

Hi phicts,

If you remove the empty label tag that behaviour seems to stop.

Bob

Where do i put the css? Another element, before the first code you provide or below it?

Edit: I put the styling on custom.css as specified by my template provider and it fixed the alignment. 8)
The label is no longer boldface though. I'll try including the formatting right on the code in the form.

Edit: Enclosing the label between <strong></strong> tags fixed it. lightbulb

Now onto finding out and testing how to save the data from this to the db and send them by emails in "letter-format" using my own text and the field names. :-) Thank you very much Sir.