I'm using RadDataForm with NativeScript-Vue. I made the following style:
RadDataForm {
margin: 0;
padding: 0;
}
DataFormEditorLabel {
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
DataFormEditorCore {
placeholder-color: #b8b8b8;
padding: 5 10;
border-width: 1;
border-color: #b8b8b8;
margin: 3 0;
font-size: 16;
text-align: left;
}
PropertyEditor {
margin: 0;
padding: 0;
}
When a validation message appears (like in the first field) the borders are gone. If I move the border properties from DataFormEditorCore to PropertyEditor, it works, but the validation message is inside the border too. What I want is to show the border around the field, but the validation message below it.
Related
Here's the CSS that I have:
.tab {
border: 0;
flex: 1 1 0;
min-height: 48px;
opacity: 1;
text-align: center;
z-index: 0;
}
.tab:not([data-selected]) {
border-radius: 0;
}
.tab[data-selected] {
background-color: $white;
border: 1px solid #eee;
z-index: 2;
}
.tab[data-selected]:first-of-type {
margin-right: -8px;
}
.tab[data-selected]:last-of-type {
margin-left: -8px;
}
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
.tab:first-of-type {
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.tab:last-of-type {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
Having problem with this bit here:
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
I'm trying to select the middle child when it is selected. My stylelint is complaining like so:
Expected "`.tab[data-selected]:not(:first-of-type):not(:last-of-type)`" to have a specificity no more than "0,3,2"
How do I approach this in a better way?
The total specificity of your selector
.tab[data-selected]:not(:first-of-type):not(:last-of-type)
is (0,4,0), which is 1 over the limit of (0,3,2).
You can increase selector-max-specificity to accommodate this selector since the difference is so small.
Or if you'd rather not do that, you can refactor your &[data-selected] CSS rules like this. Apply both negative margins by default, then selectively remove the negative margins from &:first-of-type and &:last-of-type, thereby eliminating the need for the double negation:
&[data-selected] {
background-color: $white;
margin-left: -8px;
margin-right: -8px;
border: 1px solid #eee;
z-index: 2;
&:first-of-type {
margin-left: 0; /* Preserve negative margin-right */
}
&:last-of-type {
margin-right: 0; /* Preserve negative margin-left */
}
}
Note that the margin directions are swapped in the two nested rules since we're trying to preserve the now-existing negative margins instead of adding them where they weren't there before.
I want to style QScrollBar to look like this without the indicators in the end
I tried with the stylesheets:
QScrollBar::up-arrow:vertical, QScrollBar::down-vertical
{
border: none;
background: none;
color: none;
}
But this hides the indicator arrow not the 2 buttons at the end
You can use something like this:
QScrollBar:vertical {
background: #2f2f2f;
width: 15px;
margin: 0;
}
QScrollBar::handle:vertical {
background: #5b5b5b;
}
QScrollBar::add-line:vertical {
height: 0px;
}
QScrollBar::sub-line:vertical {
height: 0px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
height: 0px;
}
The classes you were looking for are add-line, sub-line, add-page and sub-page. Since they support the box-model, you can just set their height to 0 to make them disappear.
The code above was tested with Qt 5.9.
Is there a way to display a tooltip or bubble as per the image below to show the highest value in the line graph? It should be visible at all time not just when roll over with the mouse.
Does jQplot support this? If not, is there any other graphing librabry that does this?
Many thanks.
With jqplot, this is possible using the pointLabels plugin:
JS:
$(document).ready(function(){
var line1 = [[0,14,null],[1,32,null], [2,41,null], [3,44,'Hello World!'], [4,40,null], [5,47,null], [6,53,null], [7,67,null]]; // Only the 'Hello World' will have a label
var plot1 = $.jqplot('chart1', [line1], {
title: 'Chart with Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
});
CSS for bubble (from here):
#chart1 .jqplot-point-label {
width: 100px;
height: 25px;
padding: 0px;
background: #CC857E;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
padding-top: 10px;
margin-bottom: 8px;
}
.jqplot-point-label:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 10px 0;
border-color: #CC857E transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 40px;
}
Produces this (fiddle here):
In the highstock you can use flags like this
Other options is using renderer to add custom shapes: http://api.highcharts.com/highstock#Renderer
I have the below code that's part of a php script. The brackets work correctly i.e if I change it to h1 heading it shows heading 1 but when I try to use a class for style it does not. What am I doing wrong?
<p class="indexletters">-<a name="'.substr($row['name'],0,1).'">'.substr
($row['name'],0,1).'-</p>
And this is the css
p.indexletters {
color:#00A383;letter-spacing:1px;font-family: PosterBodoni; font-size:
50px; margin: 0;
padding: 0;
border: 0;
outline: 0;"
Thank you
You're ending with " CSS should look like this:
p.indexletters{
color:#00A383;
letter-spacing:1px;
font-family: PosterBodoni;
font-size: 50px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
I have a drop down menu with css file and i want to convert it into Verctical menu I tried much but i can do that please anyone help me Folowing is my css and html code.anyone please tell me what exactly i am missing due to which menu is not converting
#sddmT
{ margin: 0;
padding: 0;
z-index: 30}
#sddmT li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddmT li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #4A617B;
color: White;
text-align: center;
text-decoration: none}
#sddmT li a:hover
{ background: #BDCFD6;
color:#4A617B
}
#sddmT div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #4A617B;
border: 1px solid #BDCFD6}
#sddmT div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #4A617B;
color: #BDCFD6;
font: 11px arial}
#sddmT div a:hover
{ background: #BDCFD6;
color: #4A617B}
And her is html Code
<ul id="sddm">
<li>ETP
<div id="m1" onmouseover="mcancelclosetime()" onclick="mclosetime()">
<a href="http://dashboard.shakarganj.com.pk/ca/sml1etp.php" target=_blank>ETP - Jhang</a>
<a href="http://dashboard.shakarganj.com.pk/ca/sml2etp.php" target=_blank>ETP - Bhone</a>
</div>
</li>
</ul>
And here is my JS code to clos and open the menu items
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'visible';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
//document.onclick = mclose;
// -->
upDate
I want like this
Try this:
#sddmT li { margin: 0;
padding: 0;
list-style: none;
position:static;
font: bold 11px arial; }
I know this is an old post, but I couldn't help noticing you have some whitespace between your main and sub-menus. Wrapping the submenus with the item that they point to will work, but you need to eliminate the whitespace, or you'll trigger the close/exit function every time you go to open the menu.
margin: 0 1px 0 0 vs margin:0.