Buy Now
Sign in

Repeater: Show dates horizontally

NickOg , December 05 2017
NickOg
Hi
I am using repeater to edit , add and delete dates. Normally these dates appear vertically.
4CF0.jpg
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.
4CF01.jpg
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
Attachments
4CF0.jpg
4CF0.jpg
(79.82 KiB)
116 Downloads/Views
4CF01.jpg
4CF01.jpg
(34.08 KiB)
158 Downloads/Views
admin
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
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
NickOg
Thanks Max - will give that a try.
Nick
NickOg
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.

4Max.png
I can send you an export or a link to the offending test bed if you have time.

Regards
Nick
Attachments
4Max.png
4Max.png
(23.55 KiB)
133 Downloads/Views
admin

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

Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!