CSS workaround Dynamic id
-
Hello Community,
Looking for help in a workaround for CSS style. This is an app i’m using for product add-ons – https://www.linkpicture.com/q/originalk.jpg.
Now the problem is I want to bring all the options in ‘Style’ and ‘Size’ in-line.
https://www.linkpicture.com/q/non-edited.jpgI have tried putting coding in browser and element style and its working you can see in ‘element.style’ in below picture.
https://www.linkpicture.com/q/edited.jpgBut I cannot figure out how to mention it in CSS as all the labels value (SMall – Medium etc.) have the same span class and dynamic id which keeps changing.
https://www.linkpicture.com/q/span-class-small.jpg
https://www.linkpicture.com/q/sman-class-medium.jpg
https://www.linkpicture.com/q/id_6.jpgAll the code seems to be inside a group or wrapper. So if use span class in CSS it changes all the add-ons which I dont want.
https://www.linkpicture.com/q/coding.jpg
https://www.linkpicture.com/q/edited-all.jpgYou can see in the second link of above paragraph, how the ‘Include pockets’ add-on is distorted now and ‘Customised’ option in ‘Size’ radio button is also in-line with other option.
Any help is in this regard is highly appreciated
Viewing 5 replies - 1 through 5 (of 5 total)
-
Thank you @threadi for taking interest in my problem. I’m not sure how much you understood my problem because I know I’m not a good explainer. I’l try to simplify my words. The issue i’m facing is not how to bring it in one line but how to select that particular label to put the code in CSS. You see as it is a Plugin it has been to to be dynamic id by the developer(which is changing on every refresh) and above that the class id is same for all the labels. So I want to know is there any other way I can define that label in CSS. I’ll put the code here so maybe you can better understand and figure what can be done and also sharing page link (was not sharing it before because I had maintenance mode activated).
https://tangerine-store.pk/product/denim-1/
P.s Please note I only want to bring Size and Style options in one line. rest are ok. other option open up when you’ve selected size and style.
<div class="wapf-field-group" data-group="p_384"> <div class="wapf-field-row"> <div class="wapf-field-container wapf-field-radio size" style="width:100%;" for="63598edcb8612"> <div class="wapf-field-label wapf--above"><label><span>Size</span></label></div> <div class="wapf-field-input"> <div class="wapf-radios"><div class="wapf-checkable"><label for="22786" class="wapf-input-label"><input id="22786" name="wapf[field_63598edcb8612]" class="wapf-input" type="radio" data-field-id="63598edcb8612" value="msidp" required=""><span class="wapf-label-text">Small</span></label></div><div class="wapf-checkable"><label for="26982" class="wapf-input-label"><input id="26982" name="wapf[field_63598edcb8612]" class="wapf-input" type="radio" data-field-id="63598edcb8612" value="t1r7x" required=""><span class="wapf-label-text">Medium</span></label></div><div class="wapf-checkable"><label for="20187" class="wapf-input-label"><input id="20187" name="wapf[field_63598edcb8612]" class="wapf-input" type="radio" data-field-id="63598edcb8612" value="e2ibl" required=""><span class="wapf-label-text">Large</span></label></div><div class="wapf-checkable"><label for="86270" class="wapf-input-label"><input id="86270" name="wapf[field_63598edcb8612]" class="wapf-input" type="radio" data-field-id="63598edcb8612" value="cdae3" required=""><span class="wapf-label-text">X-Large</span></label></div><div class="wapf-checkable"><label for="36555" class="wapf-input-label"><input id="36555" name="wapf[field_63598edcb8612]" class="wapf-input" type="radio" data-field-id="63598edcb8612" value="cqzhs" required=""><span class="wapf-label-text">Customised</span></label></div></div> </div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-radio style" style="width:100%;" for="63598d1548db2"> <div class="wapf-field-label wapf--above"><label><span>Style</span></label></div> <div class="wapf-field-input"> <div class="wapf-radios"><div class="wapf-checkable"><label for="59501" class="wapf-input-label"><input id="59501" name="wapf[field_63598d1548db2]" class="wapf-input" type="radio" data-field-id="63598d1548db2" value="u53kk" required=""><span class="wapf-label-text">Maxi</span></label></div><div class="wapf-checkable"><label for="53270" class="wapf-input-label"><input id="53270" name="wapf[field_63598d1548db2]" class="wapf-input" type="radio" data-field-id="63598d1548db2" value="7b0go" required=""><span class="wapf-label-text">Straight-Cut</span></label></div><div class="wapf-checkable"><label for="60732" class="wapf-input-label"><input id="60732" name="wapf[field_63598d1548db2]" class="wapf-input" type="radio" data-field-id="63598d1548db2" value="828o0" required=""><span class="wapf-label-text">Cover on</span></label></div></div> </div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-radio pockets wapf-hide" style="width:100%;" for="6359135a40d6f"> <div class="wapf-field-label wapf--above"><label><span>Include Pockets?</span></label></div> <div class="wapf-field-input"> <div class="wapf-radios"><div class="wapf-checkable"><label for="34290" class="wapf-input-label"><input id="34290" name="wapf[field_6359135a40d6f]" class="wapf-input" type="radio" data-field-id="6359135a40d6f" value="q3dg0" data-dependencies="[{"rules":[{"field":"63598d1548db2","condition":"!empty","value":""}]}]" disabled=""><span class="wapf-label-text">No Pockets</span></label></div><div class="wapf-checkable"><label for="58331" class="wapf-input-label"><input id="58331" name="wapf[field_6359135a40d6f]" class="wapf-input" type="radio" data-field-id="6359135a40d6f" value="p7vsk" data-dependencies="[{"rules":[{"field":"63598d1548db2","condition":"!empty","value":""}]}]" data-wapf-price="150" data-wapf-pricetype="fixed" disabled=""><span class="wapf-label-text">Zip Pockets <span class="wapf-pricing-hint">(+? 150)</span></span></label></div><div class="wapf-checkable"><label for="67853" class="wapf-input-label"><input id="67853" name="wapf[field_6359135a40d6f]" class="wapf-input" type="radio" data-field-id="6359135a40d6f" value="7szzi" data-dependencies="[{"rules":[{"field":"63598d1548db2","condition":"!empty","value":""}]}]" data-wapf-price="200" data-wapf-pricetype="fixed" disabled=""><span class="wapf-label-text">2 Zip Pocket <span class="wapf-pricing-hint">(+? 200)</span></span></label></div></div> </div> <div class="wapf-field-description">(Additional charges may apply)</div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-checkboxes scarf wapf-hide" style="width:100%;" for="635913d6baab5"> <div class="wapf-field-label wapf--above"><label><span>Add a Scarf</span></label></div> <div class="wapf-field-input"> <div class="wapf-checkboxes" data-is-required=""><div class="wapf-checkable"><label for="90794" class="wapf-input-label"><input id="90794" name="wapf[field_635913d6baab5][]" class="wapf-input" type="checkbox" data-field-id="635913d6baab5" value="9fdq0" data-dependencies="[{"rules":[{"field":"6359135a40d6f","condition":"!empty","value":""}]}]" data-wapf-price="200" data-wapf-pricetype="fixed" disabled=""><span class="wapf-label-text">Add Scarf <span class="wapf-pricing-hint">(+? 200)</span></span></label></div></div> </div> <div class="wapf-field-description">(Rs. 200 Additional Charges)</div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-number bust wapf-hide" style="width:29%;" for="6359904cb3d83"> <div class="wapf-field-label wapf--above"><label><span>Bust</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_6359904cb3d83]" class="wapf-input" data-is-required="1" data-field-id="6359904cb3d83" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> <div class="wapf-field-container wapf-field-number waist wapf-hide" style="width:30%;" for="6359913d93277"> <div class="wapf-field-label wapf--above"><label><span>Waist</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_6359913d93277]" class="wapf-input" data-is-required="1" data-field-id="6359913d93277" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> <div class="wapf-field-container wapf-field-number hips wapf-hide" style="width:30%;" for="63599144ab542"> <div class="wapf-field-label wapf--above"><label><span>Hips</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_63599144ab542]" class="wapf-input" data-is-required="1" data-field-id="63599144ab542" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-number shoulders wapf-hide" style="width:30%;" for="6359914ab126a"> <div class="wapf-field-label wapf--above"><label><span>Shoulders</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_6359914ab126a]" class="wapf-input" data-is-required="1" data-field-id="6359914ab126a" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> <div class="wapf-field-container wapf-field-number sleeves wapf-hide" style="width:30%;" for="63599155e21eb"> <div class="wapf-field-label wapf--above"><label><span>Sleeves</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_63599155e21eb]" class="wapf-input" data-is-required="1" data-field-id="63599155e21eb" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="-2" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> <div class="wapf-field-container wapf-field-number length wapf-hide" style="width:30%;" for="6359915f79a1e"> <div class="wapf-field-label wapf--above"><label><span>Length</span></label></div> <div class="wapf-field-input"> <input type="number" value="" name="wapf[field_6359915f79a1e]" class="wapf-input" data-is-required="1" data-field-id="6359915f79a1e" data-dependencies="[{"rules":[{"field":"63598edcb8612","condition":"==","value":"cqzhs"}]}]" placeholder="" min="" max="" disabled=""> </div> <div class="wapf-field-description">inches</div> </div> </div><div class="wapf-field-row"> <div class="wapf-field-container wapf-field-textarea comments wapf-hide" style="width:100%;" for="6359143bd0689"> <div class="wapf-field-label wapf--above"><label><span>Additional Comments</span></label></div> <div class="wapf-field-input"> <textarea name="wapf[field_6359143bd0689]" class="wapf-input" data-is-required="" data-field-id="6359143bd0689" data-dependencies="[{"rules":[{"field":"63598d1548db2","condition":"!empty","value":""}]}]" disabled=""></textarea> </div> </div> </div> </div>
Viewing 5 replies - 1 through 5 (of 5 total)
- The topic ‘CSS workaround Dynamic id’ is closed to new replies.