Some radio buttons as part the the repeat date API do not display in Shiny.

Offending code appears to be as below.

#foo:checked::before, input.form-checkbox, input.form-radio {
    opacity: 0;
    width: 17px;
    height: 17px;
}

Removing the opacity value or changing it from 0 to 1 fixes the problem.

Two screen shots. 1) With Shiny 2) With Seven

CommentFileSizeAuthor
#9 shiny-checkboxes-2647644-8.patch2.23 KBc7bamford
#8 After-1.png62.06 KBriddhi.addweb
#5 problems_with_date-2647644-5.patch934 bytesRajvi.addweb
daily-repeat-seven.png249.31 KBmrpauldriver
daily-repeat-shiny.png240.73 KBmrpauldriver

Comments

MrPaulDriver created an issue. See original summary.

mrpauldriver’s picture

mrpauldriver commented
Issue summary: View changes
chippper’s picture

chippper commented

I can verify this issue, as well.

It appears that the issue stems from the Date Repeat Field not using labels to correspond to their radio buttons.

The Shiny theme assumes that any radio button has a label, and inserts a fancy looking radio button with a :before pseudoelement. However, this clearly isn't the case with the Date Repeat field. Unfortunately, there is no previous sibling selector in CSS, so there are two options:

1. Get the Date Repeat Field module to change the markup to use labels
2. Make an exception in the Shiny CSS to accommodate:

/* Using "foo" to make unsupporting browsers ignore */
#foo:checked::before,
input.form-checkbox,
input.form-radio {
  opacity: 0;
  width: 17px;
  height: 17px;
}

.field-type-datetime input.form-checkbox,
.field-type-datetime input.form-radio {
  opacity: 1;
}

Obviously, option 1 is preferable, but option 2 may be quicker.

laurelstreng’s picture

laurelstreng commented

Also having this issue.

Until the bug is fixed, I was able to create a custom module w/ styling to override the Shiny Admin opacity: 0;

Rajvi.addweb’s picture

Rajvi.addweb commented
Status: Active » Needs review
StatusFileSize
new problems_with_date-2647644-5.patch934 bytes

PFA patch w.r.t comment #3

mrpauldriver’s picture

mrpauldriver commented

Confirm that this works in works in terms of modifying the shiny.css file.

I haven't haven't tried generated output via scss

Rajvi.addweb’s picture

Rajvi.addweb commented

It will work properly by shiny.css after applied patch files.

Steps for SCSS:

1. You need to install ruby & compass.
2. Details provided on http://sass-lang.com/install

riddhi.addweb’s picture

riddhi.addweb commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new After-1.png62.06 KB

Hi,

#5 patch works for me.

Thanks.

c7bamford’s picture

c7bamford commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new shiny-checkboxes-2647644-8.patch2.23 KB

This issue affects every checkbox that is not preceeded by a label, not just those that the date module is producing. This patch changes the checkbox from using a different dom element to using visibility to hide the browser's default checkbox and show the new one as an after element.