I don't seem to be able to add box shadows to input elements, my CSS is kind of like this http://jsfiddle.net/DLCTh/ and as you can see it applies correctly on div elements but not on text inputs, am I missing something? Or is it that I can't do this?
add
border:0
or
border:none
http://jsfiddle.net/DLCTh/1/
It's because of the border on the input. Add border: none; and it should work.
Related
I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}
I'm redesigning my website and wish to have certain paragraphs styled like in the below image.
I thought this would be fine but now it's suddenly just hit me... there's no way to set the thickness of an underline! Or at least I don't think there is?
Of course there is the border property, but then I would only have a border at the bottom of the whole paragraph and not under each line.
Can anyone think of a workaround for this?
You can turn your paragraph into an inline display: DEMO
This way you can even set a border-style to your underline'like:
p {
display:inline;
border-bottom:3px double;
}
Single <p>aragraphs in between title
An example of this would be:
h4 {border-bottom: 10px solid #000;}
I found this from another stack exchange question found here:
Edit line thickness of CSS 'underline' attibute
I have two buttons, one implemented as an input, the other as a span. They are put side by side with:
{ display:inline-block; }
The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.
But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?
Now I need them to be of the same height and aligned horizontally.
Update:
Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.
http://jsfiddle.net/gBeCP/
Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.
I think I have it done.
Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>
My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.
The reason it's different is because each browser has its own default styles so they will vary... just like javascript varies dramatically.
Have you ever thought about actually setting some height on the elements that you want to be the same height?
maybe
span, input[type="button"] {
height: 25px;
}
Or more specifically if you like.
The easiest solution is the following two lines (vendor-prefixes removed for brevity):
.tranCoreButton {
/* I couldn't be bothered to read through the rest of the CSS, or the
in-line CSS; seriously: *minimal* reproductive demo, please... */
display: inline-block;
box-sizing: border-box;
}
JS Fiddle demo.
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
I'm needing to remove the border above the scrolling images here: http://briansmall.com/inovar/capabilities-test.html
Trouble is, my style.css (line 367) seems to trump my screen.css, and I can't remove the border without removing it from the #left-nav a (on the same page), which I don't want to do.
Can anyone help me remove the border-top from the img on this particular page? I hope I'm making sense.
Thank you.
I appears you have border: 0 none;, not sure what you're trying to do here (you should pick one: Should I use 'border: none' or 'border: 0'?) , but if you set your css to:
img { border: 0 !important; }
in your stylesheet, that should override your inline style and remove the border on all sides.
you should try this img{border: 0}
Edited
Look into these:
try to remove border from parent of your <img>. In this case from your <a> tag
set your border in #left-nav a to none
OR
if you can't edit it, you can add new element rule for your <a> in slide show and set
border: none !important;