I am highlighting a div using ui-state-highlight on mouseover and also indenting it on mouse click event. The div is highlighted perfectly when it is not indented but once it is indented highlight still is according to the div's previous position. The highlighted/indented div is a Sortable element. I understand this has probably something do with the CSS but am a noob at that!
Code;
<style>
.ui-state-highlight {border: 4px solid #ffffa1;}
.indent { margin: 0; padding-left: 10px; }
</style>
On Mouse Click;
if ($('#'+(parseInt(pushpin._text))).prop('class') == "indent ui-state-highlight" || $('#'+(parseInt(pushpin._text))).prop('class') == "ui-state-highlight indent"){
$('#'+(parseInt(pushpin._text))).removeClass("indent");
}
else{
$('#'+(parseInt(pushpin._text))).addClass("indent");
}
On Mouseover
$('#'+(parseInt(pushpin._text))).addClass("ui-state-highlight")
Try with margin-left instead of padding-left.
Padding is the space between the content and the border of the element. What you want is to "move" the element to the right.
Just change the CSS to:
.ui-state-highlight, .ui-state-highlight.indent {border: 4px solid #ffffa1;}
.indent { margin: 0; padding-left: 10px; }
Should be a specificity issue.
Related
On this fiddle (https://jsfiddle.net/9v38rju6/3/), whenever I hover the cursor over an element in the second column, Firefox 87 on Windows starts switching back and forth between two renderings of the list, very rapidly.
Lower right panel must be ~850px wide to reproduce bug.
This does not happen under Chrome (or Edge).
The problem disappears when I comment the rule
li {
margin: 0.25em 0 0.5em;
}
Can someone explain what is going on?
Dude, this is because you change the height of the border AND the margin-bottom on :hover!
Some browsers change the layout on an specific point (what is in your hand, with CSS) and could get ugly like your problem here.
If you hover over one of there links, the height of the link grows 2px more (because of border-bottom-width 3px instead of 1px) and the entire list-element also grows 2px. Now the browser has to "re-render" the layout of your list and height of elements. Also,
you reset the margin-bottom from 0.5em to -2px.
This does not remove 2px from the margin-bottom, this set the margin-bottom to 2px! Could be kind of confusing.
ul.index {
columns: 15em;
}
li {
margin: 0.25em 0 0.5em;
}
a[href] {
text-decoration: underline;
border-bottom: 3px solid transparent;
}
a[href]:hover {
text-decoration: none;
border-bottom: 3px solid;
}
<div>
<ul class="index">
<li>#bottom-center
</li><li>#bottom-left
</li><li>#bottom-left-corner
</li><li>#bottom-right
</li><li>#bottom-right-corner
</li><li>#charset
</li><li>#color-profile
</li><li>#counter-style
</li><li>#custom-media
</li><li>#custom-selector
</li><li>#font-face
</li><li>#font-feature-values
</li><li>#font-palette-values
</li><li>##hasinstance
</li><li>#import
</li><li>##isconcatspreadable
</li><li>#keyframes
</li><li>#layer
</li><li>#left-bottom
</li><li>#left-middle
</li><li>#left-top
</li><li>#media
</li><li>media
</li><li>#nest
</li><li>#page
</li><li>#property
</li><li>#right-bottom
</li><li>#right-middle
</li><li>#right-top
</li><li>#scope
</li><li>#scroll-timeline
</li><li>#supports
</li><li>#top-center
</li><li>#top-left
</li><li>#top-left-corner
</li><li>#top-right
</li><li>#top-right-corner
</li><li>##toprimitive
</li><li>##tostringtag
</li><li>#viewport
</li><li>#-webkit-keyframes
</li></ul>
</div>
It happens as the margin changes the height of the element and the item does not suit into the first column anymore.
It does not happen if you remove the margin from either top or bottom for each li element like this:
li {
margin: 0.25em 0 0 0;
}
or
li {
margin: 0 0 0.25em 0;
}
Not sure why, but it happens with 2 and 3 columns.
I think I could work around it by using padding instead, like this:
li {
padding: 5px;
}
This way, the element height remains the same as the padding applies to the inner of the li element, not to the outside as the margin does.
I had this kendo treeview. When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).
I to use script below, but when it come to sub's-group the align is not same. Appreciate your help.
.k-treeview span.k-in {
margin-left: -10%;
padding-left: 10%;
padding-right: 60%;
}
DEMO IN DOJO
The way the tree currently works is that the li.k-item have a left padding of 16px, so for the second level it's 32px and so on.
What you need to do is put the indenting mechanism somewhere else. Your li.k-item must have no left padding, but a div inside must. Depending on your item template, it will be something like:
.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }
You can generate a dozen levels with less or sass.
When you have this, you can style the selected row:
li[aria-selected="true"] { border: 2px solid orange }
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
Styled my checkboxes like buttons as suggested here in this article:
CSS: styled a checkbox to look like a button, is there a hover?
Now I've been trying to add some margin to the buttons. This won't work, as soon as the button is selected, only the area without margin is highlighted. This looks awfull...
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
margin: 10px;
}
See here: http://jsfiddle.net/Vq759/
Anyone know how to solve this?
Thanks mates :)
I think you're overcomplicating things with your HTML/CSS, here's a quick re-do with how I'd style a checkbox (which is completely customizable to suit anything you need).
Simple HTML:
<input type="checkbox" value="1">
<label>Red</label>
I start styling the checkbox by simply hiding it:
input[type="checkbox"] {
display: none;
}
This leaves optional events/states like :checked intact.
From here I style the entire object to suit my needs, for example:
input[type="checkbox"] + label {
display:inline-block; /* or block */
line-height:normal;
cursor:pointer;
padding: 3px 14px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
margin: 40px 100px 10px 40px; /* however you please */
}
/* hover event */
input[type="checkbox"] + label:hover {
border-color: #000;
background-color: #911;
color: #fff;
}
/* checked checkbox */
input[type="checkbox"]:checked + label {
border-color: #000;
background-color: #888;
color: #fff;
}
Margin works flawlessly.
Fiddle: http://jsfiddle.net/8e5Xa/
If you are trying to make the button essentially bigger and still make the whole thing highlight onClick, use padding instead of margin:
#ck-button label span
{
padding: 10px;
}
Margin puts white-space around an element. Padding puts white-space within an element.
JSFiddle
The + operator in this selector:
#ck-button input:checked + span
.. does not function properly in older browsers. It sort of works, but has bugs when doing the kind of thing you're trying to do here (in particular, changing the :checked state of the adjacent element). Sorry, but what you're trying to do is impossible if you want all browsers to be supported.
You will need to use JavaScript if you want the text colour of the span to change when selected in all browsers.
Alternatively, you could pick a colour scheme where it looks OK if the span doesn't change colour, but do change the colour in browsers that support it.
If it changing the margin of the button, do this:
#ck-button {
margin:40px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
Also have a look at this:
This is the box-model for every HTML element
i have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}