I am making a web app with plotly dash. Ofcourse there is a callback, and then def, and finally result output to a children.
The callback is as follow,
#app.callback(
Output('prediction-content', 'children'),
[Input('input', 'value')]
The output from the def is a long message, with the model forecast, which is like below:
def predict(input):
function(input)
results = f'xxxxxx ${pred:,.0f} xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx'
return results
The children is in this Div
html.Div([
html.Button(id='prediction-content'),
]),
Now my problem is, when i shrink the browser, the button is responsive (as the CSS of it is width: 100%), but the text on the button isn’t.
So How to wrap the text to fit the button? like the rest of the sentence goes to the next line, rather than being cut sharp?
Thank you!
By the way, i googled a lot, and can't find a solution for it. Found a similar post,
Make button width fit to the text, but it seems doesn't work.
I have it fixed finally, in my custom CSS, i added:
Height: 100%;
white-space: normal
Now, the overflown text is shown.
Related
I am using bootstrap cards to display my content. I want every bootstrap card height to be equal. Everything else is fine but issue comes when I display discription as it is of variable length.
Sometimes it occupies two lines and sometimes three.
I want to fix description div height and cut down extra text from it.
Note Card are being displayed through loop
This is what I tried:
$('address').height(30);
var txt= $('address').text();
if(txt.length > 155)
$('address ').text(txt.substring(0,50) + '.....');
This is working perfectly fine for one card. But when there are multiple cards running in loop, same description text appears along every card due to this line: var txt= $('address').text();
How to make it work separately for each card?
Your current select is targetting all the address element. You need to filter out the elements based on if condition. You can use jquery filter function for this.
Then iterate over those objects and modify the text.
var $addressToChange= $('address').filter(function(){
return $(this).text().length > 155;
});
$addressToChange.each(function(){
$(this).text($(this).text()..substring(0,50) + '.....')
})
I am thankful to #Milind Anantwar for his answer as his answer gave me a clue. I little modify his answer and achieved my desired result by using this piece of code:
$('address').height(40);
$('address').each(function(i){
if ($(this).text().length > 40)
{
$(this).text($(this).text().substring(0,50) + '.....')
}
});
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
This is really a trivial problem, but it is still annoying. I'm writing a tool to allow a user to set a bunch of numerical parameters for an analysis in the IPython notebook. I've set it up as a bunch of FloatTextWidgets in a ContainerWidget. They have rather long labels like "Number of Posture Points" or "Background Disk Radius". They don't line up nicely. This is because of the length: as explained on this page, "The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned... If a label is longer than the minimum width, the widget is shifted to the right."
My labels exceed the "fixed minimum width". What I want to know is how to change it. I have poked around in the Widget source code, and I can't find this anywhere.
EDIT: In response to #Jakob, here is some code, and here is a screenshot
In this example, "Threshold:" is small enough to fit within the label width, but all the others are too long.
To change the style from within the notebook:
from IPython.display import HTML, display
display(HTML('''<style>
.widget-label { min-width: 20ex !important; }
</style>'''))
use the layout argument for each widget. Here's the link to the documentation: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
In particular it says, you an define description and widget separately in an HBox like this:
from ipywidgets import HBox, Label, Layout
label_layout = Layout(width='100px',height='30px')
HBox([Label('A description',layout=label_layout), IntSlider()])
Well, I found the narrow answer to my question: the minimum field width is defined in site-packages/IPython/html/static/style/ipython.min.css (located wherever your python libraries live -- on my Max that is /Library/Python/2.7/), where widget-hlabel is defined by
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
min-width:10ex is the relevant part.
Although one can override this for an entire document, I don't see an easy way to change it one widget at a time. It would have to be done on the JavaScript side, since the FloatTextWidget class doesn't give separate access to the label component of the Widget from the python side. That would require developing a custom widget subclassed from FloatTextWidget, which seems like way too much effort for such a simple problem, and fragile to boot. At least, that's the only way I see to do it -- corrections welcome.
Instead, I have decided to eschew altogether the automatic labeling of widgets with their descriptions, and instead construct each label as an HTMLWidget, which gives me complete control over its appearance. Here's what that looks like:
In a qtextedit with html I am changing the fontsize via the mousewheel.
It should change the size of each character, e.g.+1 or -1.
It works, slowly, but it works. The problem is now if I change the size of a html list (created via QTextCursor.createList()). As you see in the picture, the "Test" after resizing always starts at the same position (as intended), but the black points move. I'd like them to stay on the same position no matter how big the text is. I have no clue how to do that, I already tried setMarging, setIndent, setTextIndent...
def change_fontsize(self, direction):
cur=self.textedit.textCursor()
oldPosition=cur.position()
if cur.hasSelection():
begin=cur.anchor()
end=cur.position()
if begin>end:
helper=end
end=begin
begin=helper
else:
cur.select(QTextCursor.Document)
begin=0
plainText=self.textedit.toPlainText()
end=len(plainText)
for i in range(begin,end):
cur.setPosition(i)
cur.movePosition(QTextCursor.NextCharacter, QTextCursor.KeepAnchor)
fmt=cur.charFormat()
charSize=fmt.fontPointSize()
if direction=="up":
fmt.setFontPointSize(charSize+1)
else:
fmt.setFontPointSize(charSize-1)
cur.mergeCharFormat(fmt)
I am trying to create a Custom registration form template, and when I try to put in paragraph spaces (returns) or indents the program refuses to see them, even in the preview pane. Please help.
I am trying to place this form on top of a bckground image placed at the center. the image is inside a coloumn of a table. I want to indent the form so that it\s completely inside the image, n all to its left.
You are supposed to use padding for such purposes, not any characters, if I understand your intentions correctly. Try adding this css property for the form:
padding-left: Xpx;
With X being your desired number of pixels for indentation.