Referencing different div's in a form

[xauxatz]

I've been trying to place buttons at different rows in a form, but cannot seem to find a way to control their placement. I have the "dest. selector" and have tried to use nth-of-type(1), etc. - but the kitchen generator gives an error for these tags. Is there another way of doing it?

[perak]

@xauxatz "dest_selector" is not jQuery thing, only syntax is similar (it instructs kitchen's internal HTML parser on where to put the content), so only three forms are supported: select by tag name, by class name and by element id.

So, I guess you need to know your button's parent element id or class in order to correctly place the button.

[xauxatz]

For the life of me I can't figure out how to do it. But I'm not a CSS expert either.

Meteorkitchen autogenerates this html:

Current Plan

{{get_current_plan current_customer.plan}}{{>UserSettingsBillingEditPlan}}

Payment

{{get_payment_method current_customer.payment_method}}

{{>UserSettingsBillingUpdateCard}}

The button UserSettingsBillingEditPlan is correctly positioned, since it refers to the first occurrence of .form-control-static.

For the second button, UserSettingsBillingUpdateCard, there is no unique tag on the innermost "div", so how can I correctly place the button there?

It seems impossible...

On 3/31/2016 9:19 AM, Petar Korponaić wrote:

@xauxatz https://github.com/xauxatz "dest_selector" is not jQuery thing, only syntax is similar (it instructs kitchen's internal HTML parser on where to put the content), so only three forms are supported: select by tag name, by class name and by element id.

So, I guess you need to know your button's parent element id or class in order to correctly place the button.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/perak/kitchen-site/issues/271#issuecomment-203793448

[perak]

@xauxatz I added it to next version. Until then, here is dirty fix:

1. edit your ~/.meteor-kitchen/templates/blaze/ui/bootstrap/components/form.html add control-FIELD_ID into <p class="form-control-static control-FIELD_ID"> somewhere in line 56, it will look like this:

<div id="form-input-read-only" class="form-group FIELD_GROUP_CLASS FIELD_ID">
    <label for="FIELD_NAME">FIELD_TITLE</label>
    <div class="input-div">
        <p class="form-control-static control-FIELD_ID" >FIELD_VALUE</p>
    </div>
</div>

Then, your button's dest_selector set to ".control-field-payment_method"

[xauxatz]

Thanks :-)

On 3/31/2016 11:49 AM, Petar Korponaić wrote:

@xauxatz https://github.com/xauxatz I added it to next version. Until then, here is dirty fix:

1. edit your |~/.meteor-kitchen/templates/blaze/ui/bootstrap/components/form.html| add |control-FIELD_ID| into |

   | somewhere in line 56, it will look like this:

|

FIELD_TITLE

<p class="form-control-static control-FIELD_ID"

FIELD_VALUE

|

Then, your button's |dest_selector| set to |".control-field-payment_method"|

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/perak/kitchen-site/issues/271#issuecomment-203856749

[perak]

:+1: