Qt CSS border + padding, кажется, обрезает текст

У меня есть несколько QPushButton s, которые расположены рядом друг с другом. Каждая кнопка имеет отступы 8px слева и справа. Когда один из них имеет фокус, я меняю фоновый цвет. До сих пор это выглядит прекрасно:Qt CSS border + padding, кажется, обрезает текст

В дополнение к изменению фона цвета я хочу применить границу 2px белого цвета. Когда я это делаю, текст кажется отрезанным размером моей границы. Так с границей 2px это выглядит следующим образом:

Когда я увеличить пограничную величину, например, 4px мой текст полностью исчезает, потому что кнопка не увеличивает это размер правильно.

Я использую следующий CSS в Qt:

QPushButton { 
    background-color: transparent; 
    border-style: none; 
    font: bold 12px; 
    color: white; 
    padding-left: 8px; 
    padding-right: 8px; 
} 

QPushButton:focus { 
    background-color: blue; 
    border-style: solid; 
    border-width: 2px; 
    border-color: white; 
}

Edit, Решение от Rushi: Идея заключается в том, чтобы определить границу для кнопки оригинальной (не сфокусированного) с прозрачным цветом. Когда он получает фокус, ширина кнопки, по-видимому, вычисляется правильно. Я не знаю, почему Qt вычисляет его правильно в этом случае, но это работает для меня :-)

CSS с исправлением:

QPushButton { 
    background-color: transparent; 

    /* we define our border here but with transparent color */ 
    border-style: solid; 
    border-width: 2px; 
    border-color: transparent; 

    font: bold 12px; 
    color: white; 
    padding-left: 8px; 
    padding-right: 8px; 
} 

QPushButton:focus { 
    background-color: blue; 
    border-color: white; 
}

источник

2016-01-08 FrozenTarzan

Это не для меня ясно, почему вы используете pading? Может быть, вы должны использовать маржу? – Evgeny

Вы пытались добавить 'box-sizing: border-box' в ваш css ?? –

@Suresh Ponnukalai afaik Qt не поддерживает 'border-box' – Evgeny

Hello Please check below html and css code ,it will be help you to solved this issue. 

<html> 
    <head> 
     <title>title</title> 
     <meta charset="windows-1252"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 
      .box{ background: #000; width: 400px; height: 100px; margin: 50px; padding: 50px;} 
      .QPushButton { 
    background-color: transparent; 
    font: bold 12px; 
    color: white; 
    padding-left: 8px; 
    padding-right: 8px; 
    border-style: solid; 
    border-width: 2px; 
    border-color: transparent; 

} 

.QPushButton:focus { 
    background-color: blue; 
    border-style: solid; 
    border-width: 2px; 
    border-color: white; 
} 
     </style> 
    </head> 
    <body> 
     <div class="box"> 
      <a href="#" class="QPushButton">3</a> 
      <a href="#" class="QPushButton">4</a> 
     </div> 
    </body> 
</html>

источник

2016-01-08 10:02:35

Этот вопрос о Qt, а не о html! – Evgeny

Этот ответ на самом деле прекрасен. Идея состоит в том, чтобы определить прозрачную границу в первую очередь, чтобы Qt правильно вычислял границу. Я сейчас тестирую. – FrozenTarzan

Вы должны уменьшить размер отступа. Вот трюк:

QPushButton:focus { 
    ....other styles..... 
    border-width: 2px; 
    padding-left: 6px; 
    padding-right: 6px; 
}

источник

2016-01-08 09:52:29 Evgeny

Это не решение. Если бы я хотел иметь границу 512 пикселей, я должен был бы это сделать. Кажется, что Qt вычисляет ширину виджета неправильным образом. – FrozenTarzan

Вижу, вы уменьшили его точно на размер границы. На самом деле это тоже работает, я не читал код правильно, так что извините! Принятый ответ лучше, хотя из-за того, что не нужно вычислять границу вручную, что может привести к неприятным ошибкам в будущем. Еще раз спасибо :-) – FrozenTarzan

Хорошо, не проблема :) – Evgeny

Qt CSS border + padding, кажется, обрезает текст

ответ

Смежные вопросы