resizing Div via a python callback in Bokeh - bokeh

I have a plot where I would like to dynamically populate a div on user tap of data points in the first plot and automatically move the second plot downwards. I have tried setting the sizing_mode on the layout but The plots do not render. This may be an interaction with the tab widget. So far the python callback is correctly trigger on tap but the Div's height remains the same and text gets cut off.
The call back is as follows,
def update_plot_points_select(attr, old, new):
#function to change Divs if points are selected
#tap can either be a tap or untap, 1 or more points
#Show chosen word in text box
if len(new['1d']['indices']) > 0:
#update search text input field
text_input_word_search_in_documents.value = source.data['term'][new['1d']['indices'][0]]
#update Div's
text_display_category_div.update(text=source.data['term'][new['1d']['indices'][0]]+'<br/>'+'line')
text_display_category_div.update(height=600)
text_display_not_category_div.update(text=source.data['term'][new['1d']['indices'][0]]+'<br/>'+'line')
text_display_not_category_div.update(height=600)
category_scatter_graph_layout.children[0].children[1].children[1].children[0].height = 600
category_scatter_graph_layout.children[0].children[1].children[1].children[1].height = 600
else:
text_input_word_search_in_documents.value = ''
text_display_category_div.update(text='')
text_display_category_div.update(height=0)
text_display_not_category_div.update(text='')
text_display_not_category_div.update(height=0)
category_scatter_graph_layout.children[0].children[1].children[1].children[0].height = 0
category_scatter_graph_layout.children[0].children[1].children[1].children[1].height = 0
As you can see I am trying to set both the Div and parent widgetbox's height back forth from 0 to 600 but the plot does not update. Perhaps I can solve this problem in the html of the div.text. Any ideas would be helpful.
The cut off text of the Div is shown below.

I figured out one possible solution. Setting the layout with a non fixed sizing mode messed up the plots but wrapping the individual Divs inside a widgetbox inside my layout with a sizing_mode of scale_height achieved the solution I needed.
widgetbox([text_display_category_div,text_display_not_category_div],sizing_mode = 'scale_height')

Related

NSPopover positions incorrectly when NSWindow frame is programmatically changed

I have a button in an NSWindow that brings up an NSPopover with:
popover = NSPopover()
popover?.behavior = .applicationDefined
popover?.contentViewController = self
let myDelegate = MyDelegate()
myDelegate.controller = self
popover?.delegate = myDelegate
popover?.show(relativeTo: hostingButton.bounds, of: hostingButton.superview!, preferredEdge: .minY)
This works great and I can drag the window around and resize it while the popover is open with zero problems.
The window, however, displays dynamic content and I have an option to keep it "compact" so to use the minimum height necessary for all of the current content to be shown.
When my code sets the NSWindow's frame with window.setFrame(newFrame, display: true), the popover moves to the other side of the screen. Its vertical alignment is perfect and matches the new window height, but its horizontal position is completely off.
The horizontal positioning on the Screen appears to be matching the x coordinate of the hostingButton within its superview, i.e. it sure looks like popover is using the x coordinate from the button's frame as a screen coordinate!?
Am I doing something wrong?
Is there a way of asking the popover, its hosting view, its superview, or its window to have another go at the positioning?
If not is there a way that I can manually move the popover window to the right place?
Any help would be much appreciated!

ionic 3 tabs width to avoid entire horizontal space

i am using ionic-tabs component and trying to make the tab bar width just enough to show contents rather taking the entire space.
I don't see a sass variable to control it. all the variables are to control text and color related items.
How can i set the max height and widht for the ion-tabs ?
What I am aiming to look them like
https://www.dropbox.com/s/vv9vjjk2ym3iacb/Screenshot%202017-10-23%2014.10.27.png?dl=0
instead of
https://www.dropbox.com/s/hj1s1tp3xd8wbub/Screenshot%202017-10-23%2014.11.00.png?dl=0

UISearchBar in UINavigationController introduces ~60px offset in SearchResultsTable

As soon as I display my search bar in the navigation controller, the behavior of the search results table changes - the table content is offset vertically by about 60px.
Changing the table's contentOffset on the delegate ResultsWill/Did Appear makes no difference.
Setting displayInNavigationController = false restores expected alignment of results (directly below search bar with no gap).
The blank area appears to be part of the table/scrollview, as I can force the results cells to temporarily display in the blank section by scrolling down.
Any idea how to get those first result cells to display at the top of the results window?
It looks like you have viewController.automaticallyAdjustsScrollViewInsets set, but you don't actually want this adjustment. You can turn this option off via either Interface Builder (find "Adjust scroll view insets" checkbox) or programmatically.

wxpython not showing the entire grid

I have a wxpython csv reader. I am displaying results on a grid. The grid will take about half of my screen. I would like to display 100 rows at a time. I assign there to be 100 rows but I can not scroll to the bottom 50. I have proved that the rows are there by writing to the rows that I can not see then copying the whole column and pasting in excel. What I am expecting to see is a scroll bar that allows me to scroll to the bottom 50. I allowed editing of size of column. When I increase the height of the column, the scroll bar appears,but still only allows me to view the top 50 columns. (if user makes column height a inch bigger than normal, my scroll adds an inch) My best guess is there is something wrong with the way I am initiating/getting the best size of the combinations of sizers,panels,and the grid. I have cut out the code that not needed but the layout panel and box are my overall/main panel and box.
import wx.grid as grd
import wx
self.layoutPanel = wx.Panel(self)
self.layoutBox = wx.BoxSizer(wx.VERTICAL)
self.previewPanel = wx.Panel(self.layoutPanel)
self.previewBox = wx.BoxSizer(wx.VERTICAL)
self.resultGrid = grd.Grid.__init__(self, self.previewPanel,0)
self.resultGrid.CreateGrid(105,20)
self.previewBox.Add(self.resultGrid,0, wx.GROW)
self.resultGrid.SetSize(self.resultGrid.GetBestSize())
self.previewPanel.SetSizer(self.previewBox)
self.layoutBox.Add(self.previewPanel,0, wx.ALL)
self.layoutPanel.SetSizerAndFit(self.layoutBox)
self.layoutPanel.Layout()
The problem was nested somewhere in having 2 panels in side one another. This is normally "ok" to do but it is a little more complicated with the grid. I got rid of the previewPanel and previewBox completely and that solved the problem. However another problem was the FIT. The fit makes the panel as small as possible which is not what I wanted to happen. In code not shown I had re-sizes occurring and when I did this I had setSizeAndFit which took the scroll away. I changed it to setSize and the scroll bar stayed.

How do i resize the contents of a QScrollArea as more widgets are placed inside

I have a QScrollArea Widget, which starts empty;
It has a vertical layout, with a QGridLayout, and a vertical spacer to keep it at the top, and prevent it from stretching over the whole scroll area;
Elsewhere in the program, there is a QTextEdit, which when changed, has its contents scanned for "species" elements, and then they are added to the QGridLayout. Any species elements which have been removed are removed too. This bit works;
I have turned the vertical scrollbar on all the time, so that when it appears it does not sit on top of the other stuff in there. Note that the scroll bar is larger than the scroll box already though, despite not needing to be.
This is the problem. The scroll area seems to be preset, and i cannot change it. If i add more rows to the QGridLayout, the scroll area doesn't increase in size.
Instead, it stays the same size, and squeezes the QGridLayout, making it look ugly (at first);
And then after adding even more it becomes unusable;
Note that again, the scroll bar is still the same size as in previous images. The first two images are from Qt Designer, the subsequent 3 are from the program running.
If I resize the window so that the QScrollArea grows, then I see this:
Indicating that there's some layout inside the scroll area that is not resizing properly.
My question is; what do I need to do to make the scrollable area of the widget resize dynamically as I add and remove from the QGridLayout?
If you're coming here from Google and not having luck with the accepted answer, that's because you're missing the other secret invocation: QScrollArea::setWidget. You must create and explicitly identify a single widget which is to be scrolled. It's not enough to just add the item as a child! Adding multiple items directly to the ScrollArea will also not work.
This script demonstrates a simple working example of QScrollArea:
from PySide.QtGui import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
inner.layout().addWidget(b)
scroll.show()
app.exec_()
The documentation provide an answer :
widgetResizable : bool
This property holds whether the scroll area should resize the view widget.
If this property is set to false (the default), the scroll area honors the size of its widget.
Set it to true.
Why don't you use a QListView for your rows, it will manage all the issues for you? Just make sure that after you add it you click on the Class (top right window of designer) and assign a layout or it wont expand properly.
I use a QLIstWidget inside a QScrollArea to make a scrollable image list
Try this for adding other objects to the list, this is how I add an image to the list.
QImage& qim = myclass.getQTImage();
QImage iconImage = copyImageToSquareRegion(qim, ui->display_image->palette().color(QWidget::backgroundRole()));
QListWidgetItem* pItem = new QListWidgetItem(QIcon(QPixmap::fromImage(iconImage)), NULL);
pItem->setData(Qt::UserRole, "thumb" + QString::number(ui->ImageThumbList->count())); // probably not necessary for you
QString strTooltip = "a tooltip"
pItem->setToolTip(strTooltip);
ui->ImageThumbList->addItem(pItem);
Update on Artfunkel's answer:
Here's a PySide6 demo that uses a "Populate" button to run the for loop adding items to the scroll area. Each button will also delete itself when clicked.
from PySide6.QtWidgets import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
def on_remove_widget(button):
button.deleteLater()
def populate():
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
b.clicked.connect(b.deleteLater)
inner.layout().addWidget(b)
b = QPushButton(inner)
b.setText("Populate")
b.clicked.connect(populate)
inner.layout().addWidget(b)
scroll.show()
app.exec()

Resources