Ellipsis showing as [][][] unknown unicode when text is beside Glyphicon on IE8 - twitter-bootstrap-3

<a href="#" class="ellipsis tree-item no-borders" title="longnameeeeeeeeeeeeeeeeeeee">
<span class="glyphicon glyphicon-folder-closed tree-icon"></span>
longnameeeeeeeeeeeeeeeeeeee
</a>
Hi, I set the text-overflow to ellipsis but I get something like this when rendering in IE8:
[insert icon]Name[][][]
It works fine without the glyphicon but shows the unknown unicode when I have glyphicons. It also works fine in all other browsers.
Any ideas on how to resolve this?

<a href="#" class="ellipsis tree-item no-borders" title="longnameeeeeeeeeeeeeeeeeeee">
longnameeeeeeeeeeeeeeeeeeee
<span class="pull-left glyphicon glyphicon-folder-closed tree-icon"></span>
</a>
The solution I found was to reverse the order of the glyphicon and text, and made the glyphicon to float left.
For some reason IE8 uses the font of the first child to render ellipsis? (Need someone to verify this).

Related

Finding an element with a xpath that changes

Hello I am new to selenium and trying to find an element on a dropdown that expands to a list. The xpath constantly changes so cannot use it. Also tried the full xpath and did not work either. Other drop downs that I have used I have been able to use the cssselector but really do not have much to work with in here. I have tried with 'Account Maintenance' text but it did not work or did not do it properly. If I need to provide any additional information or more html please let me know.
<li class="k-item" role="treeitem" data-uid="706aa3e9-cd95-45c3-9ad0-e990887f9484" aria- selected="true" aria-expanded="false">
<div class="k-mid">
<span class="k-icon k-i-expand">
::before
</span>
<span class="k-in k-state-selected">Account Maintenance</span>
</div>
<ul "THIS IS THE LIST THAT EXPANDS AFTER CLICKING ON THE 'Acount Maintenance' text above but not my issue </ul>
</li>

How to click on an element in a list in robot framework

How can i select settings from this dropdown list.
I tried Click Element by(class/id..) but none of them work for me.
First i have to click on the profile icon, then choose the settings element
here is the html code of the icon :
<li class="dropdown userMenu hidden-sm hidden-xs" id="y7">
<a data-toggle="dropdown" class="dropdown-toggle pad10-top no-padding-left no-padding-right center" href="javascript:void(0)" id="yu">
<span class="ellipsis-menu no-margin pad5-bottom" data-toggle="tooltip" data-placement="bottom" title="Profile" id="yui_3_">
<i aria-hidden="true" class=" icon-user_icon pad5-right" id="y"></i>
</span>
<b class="caret"></b>
</a>
and here is the element of the list that i want to select :
<li id="y8">
<a id="settings" href="/cc/settings.html"><i class=""></i>Settings</a></li>
Any help please?
This should work.
Assuming that the list line element is of profile icon (It was unclear to me from the HTML you pasted, but you may better figure out on your application by inspecting it).
If needed be, you may apply a Sleep of 1-2 sec in between the two lines
Click Element xpath: //*[#title='Profile']
Click Element id: settings
P.S. I am assuming that you have imported all the required libraries for this (in fact, it is only SeleniumLibrary that is required for these two lines)

Greasemonkey Click Button without ID or Name

I'm trying to autoclick this button with greasemonkey. I tried to find a reference to this button with document.getElementsBy[ClassName/Name/TagName] with ClassName i find buttons but not the one i need. Any ideas how i can automate his click-event?
<button type="button" class="ml-2 mt-2 v-btn v-btn--depressed theme--light v-size--default amber darken-1 white--text ">
::before
<span class="v-btn__content">
<!---->
Überspringen
<i aria-hidden="true" class="v-icon notranslate v-icon--right material-icons theme--light">
redo
::after
</i>
<!---->
</span>
</button>
Screenshot from Firefox Inspector with Click Function
Thanks in Advance!
Just use xpath for element searching:
document.evaluate(XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
You can use class parameter instead id or name:
xpath: //button[#class='ml-2 mt-2 v-btn v-btn--depressed theme....']
If you do not need to use all value, you can use contains keyword:
xpath:
//button[contains(#class, 'ml-2 m2-2')]
css:
button[class*='ml-2 m2-2']
Of course, this value must be unique.
You can search child element and return back to the parent:
//button/span[#class='v-btn__content']/i/../..
You can use text for searching (bad practics if location possible to change)
//button/span[text()='Überspringen']/..

Bootstrap3 datetimepicker shows calendar even when formatted?

I have been using the bootstrap datetimepicker quite frequently in my project, but for some reason inside a bootstrap panel, the formatting does not work, and displays as a calendar. I have been trying to fix this for almost a day now, and am still really confused
My code is as follows....
<div data-input="{{ key }}" class="panel-heading"><h3 class="panel-title">{{key}}<a style="padding-left: 6px;">
<span class="panel-time-picker"><input hidden type="text" value="" name="{{ key }}"><i class="icon-clock"></i></span></a></h3>
<div class="actions pull-right">
<a><i class="fa fa-trash delete-panel-btn"></i></a>
<a data-toggle="collapse" data-parent="#accordion" class="fa fa-chevron-down"></a>
</div>
</div>
$(document).ready(function(){
$('.panel-time-picker').datetimepicker({
format: 'LT'
});
$('.panel-time-picker').datepicker();
});
I have the same exact JavaScript code elsewhere in my project, which turns the datepicker into a timepicker. I am wondering if this has something to do with being inside of a bootstrap accordion/panel?
This should display a time/clock, but still shows a month/day calendar? Any help here would be greatly appreciated!

bootstrap 3 + font-awesome - why won't this button display the image inline?

I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.