как бороться с переменной шириной кнопок в ipywidgets - PullRequest
Новая
       50

как бороться с переменной шириной кнопок в ipywidgets

1 голос
/ 17 апреля 2020

Мне нужно отобразить кучу кнопок. описание каждой кнопки соответствует каждому слову текста.

Для придания тексту вида я хочу сделать ширину кнопки в соответствии с длиной слова внутри. Поэтому я создаю переменную, которая дает мне ширину px в соответствии с количеством букв.

Я не знаю почему, но она не работает хорошо. Это работает для некоторых слов, а для других нет.

некоторые идеи? (см. на скриншоте, как слово «the» не имеет достаточно места и только ... - это отображение.

Конечная цель, конечно, состоит в том, чтобы текст выглядел нормально как текст, где я могу нажимать на слова .

Спасибо. 

mylist=['loren','ipsum','whapmmtever','loren','ipsum','otra','the','palabra','concept']

list_btns=[]
for i,word in enumerate(mylist):
    # here I try to define the width of the button as depending on the length of the word:
    wordwidth= str(len(word)*12) + 'px'
    wd_raw_save_button = widgets.Button(description=word,
                                        disabled=False,
                                        button_style='success',
                                        tooltip='check the word',
                                        icon='',
                                        layout = Layout(width = wordwidth, margin='0px 0px 0px 0px'))

    list_btns.append(wd_raw_save_button)



showcase=HBox(list_btns)
showcase

how it looks like in jupyter

На самом деле после запуска вуаля для визуализации результата я получаю это:

enter image description here

это не создает впечатление реального текста, то есть того же расстояния между словами, которое является конечной целью. Я предполагаю, но я не уверен, что причина возможно, символы имеют разную ширину, и мне придется вычислять ширину символ за символом. Но это не объясняет, что слово «the» не помещается внутри кнопки. Второе объяснение состоит в том, что базовый CSS предполагает определенная минимальная граница, которая идет «над» самим словом. В любом случае, я не знаю, как контролировать / влиять на него.

1 Ответ

1 голос
/ 20 апреля 2020

Существует ограниченный контроль для CSS для виджетов. Кажется, есть обрезка около 40px, где текст будет обрезан. Я использовал простое сравнение max, чтобы, надеюсь, приблизиться к тому, что вы ищете: 

from ipywidgets import *
mylist=['loren','ipsum','whapmmtever','loren','ipsum','otra','the','palabra','concept', 'a'] * 2

list_btns=[]
for i,word in enumerate(mylist):
    # here I try to define the width of the button as depending on the length of the word:
    wordwidth= max(len(word) * 12, 40)
    wordwidth = str(wordwidth) + 'px'
    wd_raw_save_button = widgets.Button(description=word,
                                        disabled=False,
                                        button_style='success',
                                        tooltip='check the word',
                                        icon='',
                                        layout = Layout(width = wordwidth, margin='0px 0px 0px 0px')
                                       )

    list_btns.append(wd_raw_save_button)



showcase=HBox(list_btns, layout= Layout(width='100%'))
showcase

enter image description here

...