is there any way to remove start padding from RowsSupportFragment as shown in arrows
following style does not remove start padding.
<style name="SearchTheme" parent="#style/Theme.Leanback.Browse">
<item name="rowHeaderDockStyle">#style/RowHeaderDock</item>
<item name="rowHorizontalGridStyle">#style/HorizentalGridStyle</item>
</style>
<style name="RowHeaderDock">
<item name="android:paddingStart">0dp</item>
</style>
<style name="HorizentalGridStyle" parent="Widget.Leanback.Row.HorizontalGridView">
<item name="android:paddingStart">0dp</item>
</style>
Add this statement to your dimens.xml:
<dimen name="lb_browse_padding_start">0dp</dimen>
using custome list row presenter
class CustomListRowPresenter : ListRowPresenter(FocusHighlight.ZOOM_FACTOR_NONE, true) {
override fun initializeRowViewHolder(holder: RowPresenter.ViewHolder) {
super.initializeRowViewHolder(holder)
val vh = (holder as ViewHolder)
val mContainerViewHolder =
(RowPresenter.ViewHolder::class.java).getDeclaredField("mContainerViewHolder")
mContainerViewHolder.isAccessible = true
val viewHolder = mContainerViewHolder.get(vh) as Presenter.ViewHolder
val nonOverlappingLinearLayout =
(viewHolder.view as ViewGroup).children.find { it is NonOverlappingLinearLayout }
if (nonOverlappingLinearLayout != null) {
val left = 0
val right = nonOverlappingLinearLayout.right
val top = nonOverlappingLinearLayout.top
val bottom = nonOverlappingLinearLayout.bottom
nonOverlappingLinearLayout.setPadding(left, top, right, bottom)
}
val headerHolder = vh.headerViewHolder
headerHolder.selectLevel
val field = vh::class.java.getDeclaredField("mPaddingLeft")
field.isAccessible = true
field.set(vh, 0)
}
}
Related
I've used 2 objects from CustomAction to add 2 buttons to the toolbar : it works fine (with javascript callback), but now, i would like to show / hide the little blue line under those button when the corresponding tool is activated (=adding the style 'bk-active' to the div corresponding to those buttons) : how to do that ? Is it possible to add a html id to the CustomAction ? or how to get an access to the html div on the javascript side through the Bokeh object or cb_obj or this ?
(it's a standalone file, no server)
Thanks
If you have just one Bokeh document you could give your Div a name attribute and use: var div = Bokeh.documents[0].get_model_by_name('div_name') in JS callback. See example below (works for Bokeh 2.1.1)
from bokeh.models import Div, Button, Column, CustomJS
from bokeh.plotting import show
button = Button(label='Toggle Div Visibility')
div = Div(text = 'Bokeh Div', name = "bokeh_div")
# code = "if (div.visible == true) { div.visible = false; } else { div.visible = true; }"
# button.js_on_click(CustomJS(args = {'div': div}, code = code))
code = "var div = Bokeh.documents[0].get_model_by_name('bokeh_div');
if (div.visible == true) { div.visible = false; } else { div.visible = true; }"
button.js_on_click(CustomJS(code = code))
show(Column(button, div))
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
Here is my code, where I'm trying to detect the element, which a jQuery UI draggable is hovering over. I need to get the element's object and attributes, such as class names (in this case .sortable-grid,.sortable-table,.sortable-row,.sortable-cell).
The answers found here only show how to get the draggable item itself (ui.helper or event.target), but not the element it is hovering above.
The best way to answer would be using the prepared JSFiddle, since my code uses an iframe, which would not work if the full code is posted here:
JSFiddle
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<div style="background-color:grey;display:inline;cursor:move" id="draggable">DRAG ME</div>
<iframe src="https://fiddle.jshell.net/piglin/UAcC7/1869/show/" id="frame" style="width:100%;overflow:visible" seamless="seamless" scrolling="no"></iframe>
JS:
$("#draggable").draggable({
drag: function(event, ui) {
//Some code here
}
}
It was possible by modifying the function from another answer to fit this purpose. After adapting it to use the contentWindow of the iframe and adding offset calculation it works now.
Solution
function allElementsFromPointIframe(x, y, offsetX, offsetY) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.getElementById('frame').contentWindow.document.elementFromPoint(x - offsetX, y - offsetY);
if (!element || element === document.getElementById('frame').contentWindow.document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}
var selected = $('');
var tmpColor = 'transparent';
$("#draggable").draggable({
drag: function(event, ui) {
var el = $(allElementsFromPointIframe(event.pageX, event.pageY, $(frame).offset().left, $(frame).offset().top));
var div = $(el).filter('ul, li').not($(this));
selected.css({'backgroundColor': tmpColor});
selected = div.last()
tmpColor = selected.css('backgroundColor');
selected.css({'backgroundColor': 'red'});
console.dir(div);
},
iframeFix: true,
iframeOffset: $('#iframe').offset()
});
I'm trying to dynamically build an html file and one of the variables will depend on the number of files in a directory that match a pattern. Here is the code:
html <- '
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>Sankey Plot Test</title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<iframe src = "plot0.html" width = 100% height = 1000px id = "sankey" style = "border: none"></iframe>
<script>
$(function() {
var selector = $("#sankey");
var delay_sec = 1;
var num = 1,
len = %d;
setInterval(function() {
num = (num === len) ? 0 : num;
selector.attr("src", "plot" + num + ".html");
num++;
}, delay_sec * 1000);
});
</script>
</body>
</html>'
n <- list.files(path = "path/to/files", pattern = "plot\\d+.html") %>% length()
html <- sprintf(html, n)
It's returning an error saying that the format is incorrect for my integer object, despite using %d. I saw a couple other questions on SO that mentioned incorrect format errors when using %d with sprintf, but none like what I'm seeing.
Any insight about what's going on would be appreciated. Thanks!
Your problem is in this line:
<iframe src = "plot0.html" width = 100% height
Notice the %. You can escape the % with another % like this:
<iframe src = "plot0.html" width = 100%% height
When sprintf runs through the string it will output the 100% correctly.
I have a select list where the text within the options is too long as is getting cropped. Is it possible to make the text wrap instead so that all of it is visible?
http://jsfiddle.net/W4KG7/
<select>
<option>This is option 1</option>
<option>This is option 2</option>
</select>
select {
width: 92px;
}
select {
width: 92px;
white-space:pre-wrap;
}
This only appears to work in Google Chrome.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
It seems there is no way to accomplish this in Firefox without reinventing the wheel.
The solution I have come up with achieves this for other browsers, and uses an ellipsis in Firefox:
select {
max-width: 100%;
white-space: normal;
/* For Firefox: */
text-overflow: ellipsis;
}
Using CSS to do this will only work in Chrome...
You can't do it just by using CSS, but you can use some jQuery for
a "look like" solution.
As you can see it behaves like you wanted - I'm wrapping the select box with a DIV
and adding another one that will overlap the select box - he takes the select box fixed width minus
the button of the select box. Now I'm assigning to this div the same appearance as the select box +
The selected value.
Every time the select box will be changed the new value will be set in the mask we created and
the calculated new height will be set to the select box to.
Here is the jQuery code:
$(function(){
var mYbrowser = detectBrows();
console.log(mYbrowser[0]);
$('select').each(function(index,ele){
//get current style and fixed width:
var renderWidth = $(ele).outerWidth();
var renderWidthFixed = renderWidth;
var borderstyle = $(ele).css("border-bottom-style");
var bordercolor = $(ele).css("border-bottom-color");
var borderwidth = $(ele).css("border-bottom-width");
var font = $(ele).css("font");
var defaultValue = $(ele).val();
if (borderwidth == "0px") { borderwidth = "1px"; /*FF*/ }
$(ele).css({ cursor:"pointer" });
// set by browser (different buttons):
var borderRightParsed = borderwidth +" " + borderstyle + " " + bordercolor;
var topParsed = Math.round(parseInt(borderwidth.replace(/[^0-9\.]+/g,"")));
switch(mYbrowser[0]) {
case "MSIE": renderWidthFixed = renderWidth-28; break;
case "I": renderWidthFixed = renderWidth-28; break;
case "Chrome": renderWidthFixed = renderWidth-30; break;
case "Firefox":
renderWidthFixed = renderWidth-27;
borderRightParsed= "0";
if (index > 0) topParsed++;
break;
}
//wrap + add a overlapping layer that will hide content and calculate the correct height:
$(ele).wrap($('<div />').css({width:renderWidth, margin:0, padding:0, position:"relative"}));
$(ele).after($("<div>" + defaultValue + "</div>")
.css({
minHeight:20,
padding:"5px 0px 5px 8px",
width:renderWidthFixed,
backgroundColor:"white",
whiteSpace:"pre-wrap",
position:"absolute",
borderRight:borderRightParsed,
top:topParsed,
cursor:"default",
left:borderwidth,
font:font
})
);
//set select box new height:
setHeight(ele);
//append change behavior:
$(ele).change(function(){
$(ele).next('div').text($(ele).val());
setHeight(ele);
});
});
function setHeight(ele) {
var newHeight = $(ele).next('div').outerHeight();
$(ele).height(newHeight);
}
function detectBrows(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/)
if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M;
}
});
Its simple and not complicated - the problem is that the select box element behave
and look different on each browser.
I added a small quick function to detect which browser is used and fine tuning his
unique values.
This method can be Improved but that's a good starting point.
Shlomo