For some reason, I want to my HTML widget to have fixed height, no matter how many lines there are in the widget. If the lines are too many to fit into the height, ideally one can scroll to see all the lines. I tried something like the following, but it does not work:
import ipywidgets as widgets
widgets.HTML(
value="Hello <p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p>",
placeholder='Some HTML',
description='Some HTML',
disabled=True,
height='50px',
overflow_y='scroll'
)
The follwoing code solves the problem:
import ipywidgets as widgets
from ipywidgets import Button, Layout
b=widgets.HTML(
value="Hello <p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p><p>World</p>",
placeholder='Some HTML',
description='Some HTML',
disabled=True
)
a = HBox([b], layout=Layout(height='50px', overflow_y='auto'))
display(a)
Interestingly, this does not work:
a = HBox([b], height='50px', overflow_y='auto')
It seems HBox does not pass overflow_y to the html/css, for some reason I don't understand.
Related
I'm new to GTK programming. I want to have a Label widget whose text can be edited, kind of like this: https://docs.gtk.org/gtk4/class.EditableLabel.html.
The problem is I have no idea how to implement this. I understand that Gtk.Button has a set_label() function, though I don't know how to use it to make an editable label.
You can do that with Gtk.Entry which you can set_editable based on "something". Example with check button would look something like this:
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
def on_editable_toggled(button, entry):
value = button.get_active()
entry.set_editable(value)
entry.set_sensitive(value)
win = Gtk.Window()
win.connect("destroy", Gtk.main_quit)
vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=6)
win.add(vbox)
entry = Gtk.Entry()
entry.set_text("Hello World")
vbox.pack_start(entry, True, True, 0)
check_editable = Gtk.CheckButton(label="Editable")
check_editable.connect("toggled", on_editable_toggled, entry)
check_editable.set_active(True)
vbox.pack_start(check_editable, True, True, 0)
win.show_all()
Gtk.main()
It doesn't really look like a label, but you can use the Gtk CSS styling to change the background and border colors to make it look like one when it is set to non-editable.
I have a texteditor with a basic toolbar header
I want to add a text alignment options(right, left, and center indent) and a divider(horizontal line) option I am using react-draft-wysiwyg editor and no additional plugins.
<Editor
editorState={this.state.editorState}
onEditorStateChange={this.handleEditorChange}
wrapperClassName="wrapper-class"
editorClassName="editor-class"
toolbarClassName="toolbar-class"
toolbar={{
options: ['inline', 'blockType', 'list', 'emoji', textAlign]
}}
Please someone, guide me on how to add custom options in the draft.js toolbar.
I am using
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
for applying inline styles and it is working like charm. Instead of using stateToHTML / covertToHTML use draftToHtml(convertToRaw( this.state.editorState.getCurrentContent() ));
and for converting HTML to raw data use: this.setState({ editorState: EditorState.createWithContent( ContentState.createFromBlockArray(htmlToDraft(data)) ), });
I'd not normally ask for help here, but I'm stumped - this bug is the strangest thing I've seen in a long time.
https://gfycat.com/FluidFrigidEastsiberianlaika
I've got a simple UI object called GhostProgressBar that extends ScalaFX.StackPane and gives it two children - a ProgressBar and a Label. I noticed after adding it to some other UI screens that my framerate had plummeted, to a point where the UI was painfully unusuable.
The code for this is super simple:
import scalafx.geometry.Pos
import scalafx.scene.control.{Label, ProgressBar}
import scalafx.scene.layout.StackPane
class GhostProgressBar extends StackPane {
alignment = Pos.Center
val bar = new ProgressBar() {
prefWidth = Integer.MAX_VALUE
}
val text = new Label() {
id = "ProgressBarText"
text = "PERFORMANCE TESTING"
}
children = List(bar, text)
}
In the GIF I'm using it inside a VBox that's the center element of a regular BorderPane - nothing strange or atypical.
From the behaviour I've observed, I think it's an issue with text being drawn over the bar of the ProgressBar. Just now I've done some more debugging, and my suspicions that it was related to the styling of the text were confirmed.
This is the styling that's on the text in the GIF.
#ProgressBarText {
-fx-text-fill: #dddddd;
-fx-font-weight: bold;
}
#ProgressBarText .text {
-fx-stroke: #333333;
-fx-stroke-width: 1px;
-fx-stroke-type: outside;
}
When I remove that styling, the framerate doesn't drop when the bar hits the text.
What I can't figure out is why this is happening? Anyone got any ideas? I have no idea if it's a Scala thing, or a ScalaFX thing, whether or not it's reproducible with the same stuff in a JavaFX context.
Help would be appreciated.
EDIT: I was asked for versions, here we go:
Scala version: 2.12.7
ScalaFX version: 8.0.102-R11
JDK version: 1.8.0_181
JavaFX version: unknown, I'm not familiar with ScalaFX's internals and I'm not using JavaFX directly.
EDIT 2: I was asked to try the same screen elements, but using JavaFX elements instead of ScalaFX ones. Here's the code I used, the outcome was the same - whenever the outlined text was over the progress bar's bar, the framerate dropped.
import javafx.geometry.Pos
import javafx.scene.control.{Label, ProgressBar}
import javafx.scene.layout.StackPane
class JavaFXGhostProgressBar extends StackPane {
this.setAlignment(Pos.CENTER)
val bar = new ProgressBar()
bar.setMaxWidth(Double.MaxValue)
val text = new Label()
text.textProperty().setValue("PERFORMANCE TESTING")
text.idProperty().setValue("OutlineProgressBarText")
this.getChildren.addAll(bar, text)
}
I couldn't find out what version of JavaFX I used here; IntelliJ was weirdly inconsiderate in not telling me. I couldn't find it in my external libraries list, either.
I have the following peace of code
from ipywidgets import widgets
from IPython.display import display
import numpy as np
class Test(object):
def __init__(self, arraylen):
self.a = np.random.randn(arraylen)
self.button = widgets.Button(description = 'Show')
self.button.on_click(self.show)
display(self.button)
self.button1 = widgets.Button(description = 'Show1')
self.button1.on_click(self.show)
display(self.button1)
def show(self, ev = None):
np.savetxt('test',self.a)
self.button.disabled = True
test = Test(10)
The output is two buttons in a column as shown here:
Would it also be possible, to embed the buttons in a HTML table (where I could choose them to be in a row), or any other organization scheme? Maybe it could look like this:
You could use (a very basic example):
from IPython.display import display
from ipywidgets import widgets
button1 = widgets.Button(description = 'Button1')
button2 = widgets.Button(description = 'Button2')
display(widgets.HBox((button1, button2)))
Here you can find basic and more complete examples about the use of the widgets. If you are using Jupyter you should adapt some info (from ipywidgets import widgets instead from IPython.html import widgets,...).
I am trying to nest HeaderPanels taking advantage of the header and footer capabilities in my webpage.
The top level HeaderPanel works fine, but the second HeaderPanel in the center of the top panel does not appear. Here is sample code:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
public class Admin implements EntryPoint {
private final HeaderPanel topPanel = new HeaderPanel();
private final HeaderPanel centerPanel = new HeaderPanel();
#Override
public void onModuleLoad() {
topPanel.setHeaderWidget(new HTML("top header"));
topPanel.setFooterWidget(new HTML("top footer"));
centerPanel.setHeaderWidget(new HTML("center header"));
centerPanel.setFooterWidget(new HTML("center footer"));
centerPanel.add(new HTML("center center"));
topPanel.setContentWidget(centerPanel);
RootLayoutPanel.get().add(topPanel);
}
}
The 'center header', 'center footer' and 'center center' never appear on the webpage.
I also tried using a DocLayoutPanel in the center and it didn't work either.
I suspect that these only work when attached to the RootLayoutPanel.
Is nested Header or Doc layout panels possible?
If you try the Chrome inspect, there's something similar in IE9 too, you'll see that that the center widget has 0 height. If you set the size it will work. I would use a DockLayoutPanel. You can nest DockLayoutPanels.