Forums

Hi
I am using repeater to edit , add and delete dates. Normally these dates appear vertically.
[attachment=58853_20171205235448_4cf0-jpg.jpg][/attachment]
I want to begin to arrange them horizontally using css, The problem is that, once I change the display so

form fieldset.clsCourseManager div.repeater div.container{
    /*No idea why but hides first empty date box!*/
    display: inline-block !important;
    min-width:120px !important;
    width:120px !important;
    max-width:120px !important;
    min-height:110px !important;
    height:110px !important;
    max-height:110px !important;
    padding:0px !important;
    margin:0px !important;
}

an extra field appears.
[attachment=58853_20171205235529_4cf01-jpg.jpg][/attachment]
If I use this CSS

form fieldset.clsCourseManager div.repeater div.container:first-child {
    background-color: aqua !important;
    visibility: hidden !important;
    display: none !important;
}

to hide that field then the dates field for a new entry does not appear - it remains hidden using that CSS.

Any suggestions of a way around this. (The CSS isn't finished yet of course - still vertical until I can solve it.

Regards
Nick

Hi Nick,

You want to get the date fields to appear next to each other on the same line ? I would suggest that you place the repeater inside a "Multi fields" area instead of changing the CSS and this may affect other form sections.

Happy new year!

Best regards

Thanks Max - will give that a try.
Nick

No good Max. This from a very much stripped down version of the original. No CSS just a date control in a repeater in a multifield.

[attachment=58853_20171231231835_4max-png.png][/attachment]
I can send you an export or a link to the offending test bed if you have time.

Regards
Nick

Hi Nick,
Apologies for the late reply on this!
Thinking about it again, it may be difficult to achieve the horizontal repeating, as the original element and the cloned elements are inside a full width div by default.
If you can add a custom class to the cloned div and style that using custom CSS then that would be the only solution I guess without core code changes.
If the extra fields appears then make sure that first div is excluded from the CSS
Best regards