I have got an issue with a glyphicon that doesn’t come up as it should. This is driving me nuts because when I use that icon in a plain html page it comes up just fine but inside that function that displays the datetime picker, it doesn’t.
As it is a private project I am not allowed to publish the code so my question is how to debug this? I am usually right-clicking the element but when clicking the “Inspect” link the picker disappears and the Developer Tools are displayed but without the context of the popup therefore I can’t see the reference of the missing icon. See https://www.screencast.com/t/sPamRcTp
Instead of right-click then ‘Inspect’ in the drop-down menu, try clicking on the icon in the top-left corner of Developer Tools (two buttons to the left of “Elements” button). Then left-click on your missing glyphicon symbol. Does that work?
Hi Archibald,
I am assuming you’re talking about the icon I am pointing with the rose arrow below on the print screen below, right? When doing this the datetime picker goes away !
I managed to extract all parts of the project I am working on. You can see the form here.
At #2 the green arrow is pointing to the space where the icon should appear. I managed to get the HTML code when running the js script and it appears to be fine.
<table class="table-condensed">
<tbody>
<tr>
<td><a data-action="togglePicker" title="Select Time"><span class="glyphicon glyphicon-time"></span></a></td>
<td><a data-action="close" title="Close the picker"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr>
</tbody>
</table>
The same icon is shown at #1.
<span class="glyphicon glyphicon-remove"></span>
This is the print screen:
I see the glyph appears here if you click the 'Tryit; button for the glyphicon-remove:
Does inspection of the files in the <head> help?
In Developer Tools you can see in the <head> that there is a <style type="text/css"> (although it is not in the source code). By appending .glyphicon-remove:before {content: "\274C";} to the CSS I have had a red dingbat “cross mark” appear. Alternatively .glyphicon-remove:before {content: "\2716";} for a black dingbat “heavy multiplication X”,Note these characters then appear both in the top-left and where required bottom right. Is this the basis of a possible work-around? Or does this give a clue as to why the bottom-right glyph does not appear? Is the order of files in the <head> important?
Fixed !!
Inspired by your comment I started to poke around that application I didn’t write, it isn’t always easy to take over other people’s jobs, even when it is fairly well written as is the case here.
After removing one by one the CSS files I found out that the style.min.css was causing the interference. A 12.000 lines CSS file! Eventually, I found a section referring to that datetimepicker and by adding the line marked in yellow below I managed to display the icon as I wanted. I didn’t know that parts of the datetimepicker component were being referenced in that CSS as I thought that was handled by the tempusdominus-bootstrap-3.min.css
Thank you Archibald for the feedback, somehow your last post put me on the right track. Ending the day on a high note !!
1 Like
I would just use the HTML date picker 
I needed the time also, anyway, I double-checked this morning and it is working fine. Let’s move to some other surprises.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.