I can't seem to find in the stylesheet the Listview. I would like to style the heigt/margin up and down of the listview and buttons.
Does anybody know where to style this?
Are you sure you want to change margin, not padding? When you change the margin, background colors will not match. Anyway, try this CSS for changing padding:
.ui-listview li.ui-li {
padding-top: 40px;
padding-bottom: 40px;
}
You can update margin instead using the same CSS selector.
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 trying to have the text in my Jumbotron (Bootstrap 3) all the way to the left.
I tried padding and align but nothing seems to work: there's always a distance between the left-beginning of the Jumbotron background and the text.
I tried adding to a custom css file:
.jumbotron {
padding-left: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
Top and bottom work. Left doesn't.
It is because of Bootstrap css style:
.container .jumbotron {
padding-left: 60px;
}
Try to override it.
You are falling prey to CSS specificity based on descendant combinators. Basically .container .jumbotron{...} carries more weight than .jumbotron{...} alone, so easiest thing is to override it with
.container .jumbotron {
padding:0px 3px;
}
However, there are a number of descendant combinators within jumbotron, (h1-6, .h1-6, p, etc) you have to watch out for... To see this in action, throw an h1 at the top of the jumbotron and pull your hair out trying to customize padding for that!
Example Bootply
Instead of overriding the CSS for the jumbotron, why not just add your own class to the element and style it the way you like with your own CSS? i.e. Don't use Bootstrap's jumbotron class at all - just style it "from scratch".
I am trying to change the margin-top property of a div in a WordPress theme, however it does not seem to work. I have added the following line to the custom css stylesheet:
div#primary {
display: block;
margin-top:50px;
}
However the div whose property I want to change does not move down. The example can be found at the following URL: http://who.designbond.co.uk/contact-2/
The div I need to move down is the one containing the text of Phylosophy. Can anyone explain to me what I am doing wrong?
Thanks
That div has an inline style with margin-top: 0px, which is overriding your stylesheet.
You need to remove or modify that inline style, or (in a pinch, and don't tell anyone I said this) add !important to your stylesheet rule).
div#primary {
display: block;
margin-top:50px !important;
}
I know it's not a good thing to do (adding !important), but it can help.
Something is setting some inline styling on that div. You can override it using !important.
#primary {
margin-top: 50px !important;
}
Also, since there is an id on that element you css selector can be simplified to #primary instead of div#primary
I see that the div with id primary has a in line stylesheet. Inline style sheet takes priority over class based style sheet. Your inline stylesheet has margin-top:0px, which is ignoring your class based styling. remove it and it will work.
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I installed Thank you plugin but the button on my test site looks strange.
I found out why. Because it inherits #commentform textarea { width: 45%; } from my theme. If I remove the width from css the button looks ok. Any idea how I can fix that? Of course I do not want to remove width for #commentform textarea. Can I do something about that on css level of the button? Something like width:not-inherit; width:reset; I'd say that the width of the button wouldn't be declared at all if there was no #commentform textarea
Try putting
width: auto;
on the button. That should fix it in this case.
It is an old question but I just had the same problem with width inherit from parent as 100%. Turns out adding display property to inline-block helps.
display: inline-block;
you can add "!important" to the newer css.
ex :
first{ float:right;}
second{ float:left !important;}
<div class="first second"></div>
This div should be float left
Put this in your css and also remove that inline styling you have there for that button:
input.thanks_button{
background:url("http://asha.onalllevels.com/wp-content/plugins/thanks-you-counter-button/images/thanks_compact_blue1.png") no-repeat;
color:#fff;
font-family:Verdana,Arial,Sans-Serif;
font-size:14px;
font-weight:normal;
width:auto !important;
}