QCombobox - text jumps around and the dropdown list needs padding - qt

I am modifying an existing Qt .qss stylesheet and am having some issues with readability. Currently, the text in the Qcombobox has no padding when inactive and the padding is applied as soon as I click upon the dropdown.
I would also like to apply padding to the QAbstractItemView so the text does not overlap and has some spacing between the items.
Here's what I have:
And this is what I try to mimick (it's Blender):
This is the code I am editing:
QComboBox {
border: 1px solid #282828;
background: #282828;
border-radius: 6x;
selection-background-color: #303030;
padding-left: 10px;
padding-right: 10px;
/* border-radius changed from 2 to 10px
padding left-right changed to 10px - was 4px*/
min-height: 1.5em;
/* padding-top: 2px; removed to fix #132 > See ExtremeProDark */
/* padding-bottom: 2px; removed to fix #132 > See ExtremeProDark */
/* min-width: 75px; removed to fix #109 > See ExtremeProDark */
/* Indicator - removed to fix #132 > See ExtremeProDark */
}
QComboBox:editable {
background: transparent;
}
QComboBox QAbstractItemView {
border: 0px solid #181818;
border-radius: 10px; /* was 0px */
background-color: #181818;
selection-background-color: #599EB3;
}
QComboBox QAbstractItemView:hover {
background-color:#282828;
color: White;
}
QComboBox QAbstractItemView:selected {
background: #599EB3;
color: White;
padding-left: 10px;
padding-right: 10px;
}
QComboBox QAbstractItemView:alternate {
background: #303030;
}
QComboBox:disabled {
background-color: #4d4d4d;
color: #353535;
}
QComboBox:hover {
background-color: #282828;
border: 1px solid #282828;
}
QComboBox:focus {
background-color:#599EB3;
border: 1px solid #599EB3;
}
QComboBox:on {
selection-background-color: #599EB3;
padding-top: 10px;
padding-left: 10px;
/* shift the text when the popup opens */
}
}
QComboBox::indicator {
border: none;
border-radius: 0px;
background-color: transparent;
selection-background-color: transparent;
color: transparent;
selection-color: #557bb6;
/* Needed to remove indicator - fix #132 */
}
QComboBox::indicator:alternate {
background: #343434;
}
QComboBox::item {
/* Remove to fix #282, #285 and MR #288*/
/*&:checked {
font-weight: bold;
}
&:selected {
border: 0px solid transparent;
}
*/
}
QComboBox::item:alternate {
background: #3c3c3c;
}
QComboBox::drop-down {
subcontrol-origin: padding;
background-color: #303030;
subcontrol-position: top right;
width: 14px;
border-left: 1px solid #303030;
}
QComboBox::drop-down:hover {
background-color: #282828;
}
QComboBox::drop-down:focus {
background-color: #599EB3;
}
QComboBox::down-arrow {
image: url(qss:images_dark-light/down_arrow_disabled_light.svg);
height: 10px;
width: 10px;
}
QComboBox::down-arrow:on, QComboBox::down-arrow:hover, QComboBox::down-arrow:focus {
image: url(qss:images_dark-light/down_arrow_lighter.svg);
}

Related

Strange edges in the input fields and heights with non-integer value

I was writing some CSS for a very common user login form, except that when I logged in from another computer with the same browser (Firefox) and operating system (Ubuntu), some strange white borders emerged on the outside.
What's even stranger is that they tend to appear and disappear simply by resizing the window.
Because? how can this be prevented?
Thanks everyone for the help! :)
HTML:
<div class="npt nptFocus">
<span>Aa</span>
<input type="text" name="usr" placeholder="Nickname">
</div>
LESS:
// Palette
#main_color: blue;
#main: darken(saturate(#main_color, -97%), 25%);
#neutral: saturate(darken(#main_color, -25%), -25%);
#verde: #118769;
#rosso: #fe5f55;
#bianco: darken(saturate(#main_color, -40%), -45%);
#v_soft = 10%;
#v_medium = 25%;
#v_hard = 40%;
#neutral_dark: darken(#neutral, #v_soft);
#verde_dark: darken(#verde, #v_soft);
#rosso_dark: darken(#rosso, #v_hard);
#main_light: lighten(#main, #v_hard);
#main_dark: darken(#main, 8%);
#radius: 5px;
.npt {
display: table;
background: #bianco;
border-radius: #radius;
border: solid 1px #main_light;
width: 100%;
overflow: hidden;
input, span{
display: table-cell;
padding: 10px;
transition: 0.25s;
}
input {
border: none;
background: none;
border-radius: 0px;
color: #main;
width: 100%;
}
span {
border-right: solid 1px darken(#main_light, -15%);
color: darken(#main, -40%);
background: darken(#main_light, -25%);
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
&.nptFocus {
border: solid 1px #neutral_dark;
span {
border-right: solid 1px #neutral_dark;
color: #bianco;
background: #neutral_dark;
}
}
}
SCREEN:
UPDATE 1: Added compiled CSS
.npt {
display: table;
background: #ebebfa;
border-radius: 5px;
border: solid 1px #a3a3a8;
width: 100%;
overflow: hidden;
}
.npt input,
.npt span {
display: table-cell;
padding: 10px;
transition: 0.25s;
}
.npt input {
border: none;
background: none;
border-radius: 0px;
color: #3e3e42;
width: 100%;
}
.npt span {
border-right: solid 1px #cacace;
color: #a3a3a8;
background: #e5e5e6;
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
.npt.nptFocus {
border: solid 1px #6363e9;
}
.npt.nptFocus span {
border-right: solid 1px #6363e9;
color: #ebebfa;
background: #6363e9;
}
.npt.nptError {
border: solid 1px #fe5f55;
}
.npt.nptError span {
border-right: solid 1px #fe5f55;
color: #ebebfa;
background: #fe5f55;
}
.npt.nptError.nptFocus {
border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
border-right: solid 1px #d38580;
background: #d38580;
}
.npt.nptOk {
border: solid 1px #118769;
}
.npt.nptOk span {
border-right: solid 1px #118769;
color: #ebebfa;
background: #118769;
}
.npt.nptOk.nptFocus {
border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
border-right: solid 1px #6cac9b;
background: #6cac9b;
}
UPDATE 2:
Following the help of #Manas Khandelwal and the tests carried out together, it seems that this is due to a browser rendering error as the logo above the form, having the width declared as a percentage, will never have a height with an integer value .
Ideas?
Really the only solution is really having to round all the heights via JavaScript?
$('.roundHeight').each(function(){
if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
$(this).css('marginTop', d + 'px');
});
Add outline: none; to the input element;
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP

input type=range getting margin in chrome, firefox

I have a form:
<div class="ttSliderFrmCnt">
<form ref="form" class="ttSliderForm">
<input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/>
</form>
</div>
I tried adding some custom styles, following this Css-tricks tutorial:
// Hide the default slider
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
// Style the thumb
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid $darkDivider;
height: $bodyTextSize;
width: $bodyTextSize;
border-radius: 50%;
background: $accentColor;
margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
border: 1px solid $darkDivider;
height: $titleTextSize;
width: $titleTextSize;
border-radius: 50%;
background: $accentColor;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
border: 1px solid $darkDivider;
height: $titleTextSize;
width: $titleTextSize;
border-radius: 50%;
background: $accentColor;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background: $accentColor;
border-radius: 2px;
border: 0.2px solid $darkDivider;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: $accentColor;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
background: $accentColor;
border-radius: 2px;
border: 0.2px solid $darkDivider;
}
input[type=range]::-ms-track {
width: 100%;
height: 4px;
background: transparent;
border-color: transparent;
border-width: 2px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: $accentColor;
border: 0.2px solid $darkDivider;
border-radius: 2px;
}
input[type=range]:focus::-ms-fill-lower {
background: $accentColor;
}
input[type=range]::-ms-fill-upper {
background: $accentColor;
border: 0.2px solid $darkDivider;
border-radius: 2px;
}
input[type=range]:focus::-ms-fill-upper {
background: $darkSecondaryText;
}
The variables used are either sizes in px, or color definitions and should not matter.
Now a curious thing happens, when I inspect this in chrome I get a margin I did not define on the input itself:
input[type="range" i] {
-webkit-appearance: slider-horizontal;
color: rgb(144, 144, 144);
padding: initial;
border: initial;
margin: 2px;
}
Where does this come from and how can I override it?
This is the user agent stylesheet of your browser. If you want to override the rule, simply define the rule in your CSS.
input[type="range"] {
margin: 0px;
}
<div class="ttSliderFrmCnt">
<form ref="form" class="ttSliderForm">
<input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/>
</form>
</div>

Table with vertical header (sortable)

I am working on vertical table with header as sortable using following code. Column are vertical but how can they be sorted by clicking header.
CSS Code:
<style>
#tabs{
}
#vartabs .ui-widget-header {
background-color: white;
background-image: none;
border-top: none;
border-right: none;
border-left: none;
}
#vartabs .ui-widget-content {
background-color: white;
background-image: none;
}
#vartabs .ui-corner-top,#tabs .ui-corner-bottom,#tabs .ui-corner-all{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#vartabs .ui-state-default,
#vartabs .ui-state-default a {
background-color: white;
text-align: center;
}
#vartabs .ui-state-default a {
width: herepx;
}
#vartabs .ui-tabs-active,
#vartabs .ui-tabs-active a {
background-color: darkgray;
text-align: center;
}
</style>
<style>
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(0px, 51px)
/* 45 is really 360 - 45 */
rotate(270deg);
width: 8px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
table tbody
{
overflow: auto;
height: 10px;
}
.scroll {
max-height: 700px;
overflow: auto;
}
th
{
width: 72px;
}
</style>
I found another code on net for sorting table but it is bit difficult to merge to codes as their logic is bit different.
You cannot sort tables just with HTML and CSS. You'll either need to do it on the client via JavaScript, or server-side via whatever programming language you're using to generate the page.

styling CellTable Row depending on it's value

I need to change the color of the row in CellTble depending on its value, I'm setting the style by (cellTable.css) file using Interface CellTable.Style .
I tried the code :
AttendanceTable.setRowStyles(new RowStyles<AttendanceRecord>(){
#Override
public String getStyleNames(AttendanceRecord row, int rowIndex) {
if(row.getName().equals("-"))
return"blueText";
else
return"normalText";
}
});
and both (blueText , normalText)are defined in my project.css file but it don't see them.
any suggestions? ... thanks in advance.
my cellTable.css file is as follow:
/**
* table styles
*/
.cellTableCell {
border:0px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 37px;
color:#7f7f7f;
font-size: 12px;
font-family: sans-serif;
padding-left: 10px;
}
.cellTableHeader {
color: #FFFFFF;
border:0px;
border-right: 1px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
background-color: #6AA0BF;
text-align: center;
font-size:11px;
text-shadow: none;
overflow: hidden;
height: 50px;
font-family: sans-serif;
}
.cellTableEvenRow {
background: #C8CED6;
text-align: center;
}
.cellTableOddRow {
background: #DFE7F2;
text-align: center;
}
.cellTableHoveredRow {
background: #D0D8E8 ;
text-align: center;
}
.cellTableSelectedRow {
background: #ea9706;
text-align: center;
}
.cellTableSelectedRowCell {
color: white ;
}

Ajax calendar extender cuts off at bottom

I used Ajax calendar extender with my custom css classes. These are applied well but problem is that when any calendar which is at bottom of page opens, it get cut at bottom due to restricted boundary of form. How can I overlap on the form boundary and can get full view of Calendar.
In above image blue line at bottom is the form border. Also below are the classes that I used to styling the calendar
.calendarContainer
table th
{
padding: 0!important;
margin: 0!important;
border: 0!important;
}
.calendarContainer
table td
{
padding: 0!important;
margin: 0!important;
border: 0!important;
}
.calendarContainer .ajax__calendar_container {
background-color: #DEF1F4;
border: solid 1px #A1DCF2;
z-index : 10000 ;
}
.calendarContainer .ajax__calendar_header
{
background-color: #ffffff;
margin-bottom: 4px;
}
.calendarContainer .ajax__calendar_title,
.calendarContainer .ajax__calendar_next,
.calendarContainer .ajax__calendar_prev {
color: #004080;
padding-top: 3px;
}
.calendarContainer .ajax__calendar_body {
background-color: #ffffff;
border: solid 1px #A1DCF2;
z-index : 10000 ;
}
.calendarContainer .ajax__calendar_dayname {
text-align:center;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
.calendarContainer .ajax__calendar_day {
color: #004080;
text-align:center;
}
What could be the appropriate css?
Try this,
/* css for Ajax calandar control. */
.Calendar td
{
text-align: left;
padding: 0px;
height: 19px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#333;
}
.Calendar .ajax__calendar_container
{
background-color: white;
border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_header
{
background-color: #ffffff;
margin-bottom: 4px;
}
.Calendar .ajax__calendar_title, .Calendar .ajax__calendar_next, .Calendar .ajax__calendar_prev
{
color: black;
padding-top: 3px;
}
.Calendar .ajax__calendar_body
{
background-color: white;
border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_dayname
{
text-align: center;
font-weight: bold;
margin-bottom: 4px;
margin-top: 2px;
}
.Calendar .ajax__calendar_day
{
text-align: center;
}
.Calendar .ajax__calendar_hover .ajax__calendar_day, .Calendar .ajax__calendar_hover .ajax__calendar_month, .Calendar .ajax__calendar_hover .ajax__calendar_year, .Calendar .ajax__calendar_active
{
color: #004080;
font-weight: bold;
background-color: silver;
}
.Calendar .ajax__calendar_today
{
font-weight: bold;
}
.Calendar .ajax__calendar_other
{
color: #bbbbbb;
}
.Calendar .ajax__calendar_hover .ajax__calendar_today, .Calendar .ajax__calendar_hover .ajax__calendar_title
{
color: Blue;
}
/* End */
aspx:
<cc1:CalendarExtender ID="cetbDate" runat="server" Enabled="True" Format="dd/MM/yyyy"
TargetControlID="tbFromDate" PopupPosition="TopLeft" CssClass="Calendar">
</cc1:CalendarExtender>

Resources