Monitor Reply

Support

Bug: Datepicker -> CSS missing

Permalink Browser Info Environment June 13, 2017 at 9:24 AM

I used the datepicker on a concrete5 8.1 project. The visual appereance was not the same as in 5.7. After some research i found that some css-styles are from a file bootstrap-modified.css that comes with the elemental theme.

Missing declarations are e.g.:
.dropdown-menu { ... }
.collapse { }
.collapse.in { }

Perhaps this shouldn't be in relation to the theme and work as standalone (provided by bootstrap-datepicker.css or some custom blockdesigner-css)?

Thanks for making block designer available. Great piece of software!

Type:	Ticket
Status:	Archived

ramonleenders replied on Jun 13, 2017 at 12:25 pm Permalink Reply

Hi there,

I just tried with both elemental and a different theme I had craeted, and had no issues. Both are Bootstrap themes though. You don't have a Bootstrap theme I assume? Since you can have multiple themes in a concrete5 website and use blocks with different themes, I'd advice you to include the missing Bootstrap styling within your theme (if logged in/has edit access). This way you don't override any existing theme Bootstrap stuff and since you have a non-Bootstrap theme, it will work as expected. That means it will always work, with every theme. Right? Also, no more logic has to be entered within the block itself, which would make the site slower eventually if it has to check every time/page. Just a couple extra lines within your theme and you're done.

Kind regards,

Ramon

webpresso replied on Jun 13, 2017 at 2:13 pm Permalink Reply

We have a bootstrap theme. But not the full css code.
I solved this with adding the missing css in a file that is included while logged in. So the editing experience works just fine now.

ramonleenders replied on Jun 13, 2017 at 2:15 pm Permalink Reply

Oh really.. My Bootstrap theme(s) do not have anything special in it. Maybe it's missing code then, since I'm assuming this is default Bootstrap v3 code (or maybe you have Bootstrap v2)?

But you fixed it now, right? So "solved" for your theme? :)

Kind regards,

Ramon

webpresso replied on Jun 13, 2017 at 2:19 pm Permalink Reply

Yes solved for us.
We have the full bootstrap 3.6 present as less but do not include every less-file since we use mainly the grid and few other things. So we dont't geht the .dropdown class. That was the reason for not working.

But if someone don't use bootstrap the date/timepicker would not work for them unless they add the same css classes.

best regards, Roland

webpresso replied on Jun 13, 2017 at 2:21 pm Permalink Reply

This is what we added. Perhaps it's helpful for someone else.

/* Needed for Timepicker */
.collapse{
    display:none
}
.collapse.in{
    display:block
}
tr.collapse.in{
    display:table-row
}
tbody.collapse.in{
    display:table-row-group
}
.collapsing{
    position:relative;

Viewing 15 lines of 109 lines. View entire code block.

 
 
/* Needed for Timepicker */
.collapse{
    display:none
}
.collapse.in{
    display:block
}
tr.collapse.in{
    display:table-row
}
tbody.collapse.in{
    display:table-row-group
}
.collapsing{
    position:relative;
    height:0;
    overflow:hidden;
    -webkit-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease
}
.caret{
    display:inline-block;
    width:0;
    height:0;
    margin-left:2px;
    vertical-align:middle;
    border-top:4px solid;
    border-right:4px solid transparent;
    border-left:4px solid transparent
}
.dropdown{
    position:relative
}
.dropdown-toggle:focus{
    outline:0
}
.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    z-index:1000;
    display:none;
    float:left;
    min-width:160px;
    padding:5px 0;
    margin:2px 0 0;
    list-style:none;
    font-size:14px;
    text-align:left;
    background-color:#fff;
    border:1px solid #ccc;
    border:1px solid rgba(0,0,0,0.15);
    -webkit-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);
    box-shadow:0 6px 12px rgba(0,0,0,0.175);
    -webkit-background-clip:padding-box;
    background-clip:padding-box
}
.dropdown-menu.pull-right{
    right:0;
    left:auto
}
.dropdown-menu .divider{
    height:1px;
    margin:9px 0;
    overflow:hidden;
    background-color:#e5e5e5
}
.dropdown-menu>li>a{
    display:block;
    padding:3px 20px;
    clear:both;
    font-weight:normal;
    line-height:1.42857143;
    color:#333;
    white-space:nowrap
}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{
    text-decoration:none;
    color:#262626;
    background-color:#f5f5f5
}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{
    color:#fff;
    text-decoration:none;
    outline:0;
    background-color:#428bca
}
.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{
    color:#777
}
.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{
    text-decoration:none;
    background-color:transparent;
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
    cursor:not-allowed
}
.open>.dropdown-menu{
    display:block
}
.open>a{
    outline:0
}
 
.bootstrap-datetimepicker-widget>ul {
    padding: 0;
}

ramonleenders replied on Jun 14, 2017 at 6:28 am Permalink Reply

OK, I see. Already thought some CSS was left out.

Thanks for pasting in the missing CSS, would be really useful for people without Bootstrap or leaving out some .less files as well (or stripping the CSS manually)!

Hope the rest of the Add-On works as expected :)

Kind regards,
Ramon

ConcreteCMS replied on Jun 29, 2017 at 12:02 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

ConcreteCMS replied on Jun 29, 2017 at 12:03 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

ConcreteCMS replied on Jun 29, 2017 at 12:04 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Block Designer

Support

Bug: Datepicker -> CSS missing

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post