I want to remove the boxes around the <ListGroupItems> in Reactstrap's <ListGroup>
Simply use Bootstrap's border-0 class under Borders Utility.
<ListGroup>
<ListGroupItem className="border-0">Item 1</ListGroupItem>
<ListGroupItem className="border-0">Item 2</ListGroupItem>
</ListGroup>
Related
See code here
I am importing a <button> component that has two span children. These span children are setting a gradient color that I want to override, but I only have access to the parent <button>. Is there a way for me to remove the styling on the children? I am using Tailwind.
Code:
<button className='from-orange-500 to-fuchsia-600'> // I want my button to be this gradient
<span className='from-violet-400 dark:from-violet-400 to-violet-600 dark:to-violet-600'></span> // I want to delete these styles
<span className='from-violet-600 dark:from-violet-600 to-violet-400 dark:to-violet-400'></span> // And these styles
</button>
And the component is being called as follows, which is why I can't target the spans:
<SubmitButton className="bg-gradient-to-l from-orange-500 to-fuchsia-600/>
I have a series of Material UI buttons as such:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
I've given them a class that simply displays them as block eg:
button: {
display: 'block',
},
They work fine but there seems to be a setting where the smaller Edit button has extra padding on it because it has less text in the name:
If I add more text it corrects it:
Would anyone know how to fix this? If there is a setting somewhere?
The problem is with the min-width property which forces that "padding". Try just adding min-width: 'unset' to your button class.
There is a live example
https://codesandbox.io/embed/naughty-galois-bc0sz?fontsize=14&hidenavigation=1&theme=dark
HTML:
<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">
Popover on left
Javascript:
$('*[data-id]').mouseenter(function(event) {
var e=$(this);
var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';
e.popover({html:true,placement:'bottom', animation: false,
delay: { show: 1500, hide: 100 }, content: content}).popover('show')
});
It works fine but only if string in content contains spaces. If theres no spaces text overlaps with second div.
JS Fiddle:
http://jsfiddle.net/9Nt48/
How i can fix this?
This is the problem with continuous text, CSS will automatically place it in next line for you if it seems to overlap with the other divs but it doesn't have much of a choice when you don't give a space, this is because it doesn't know when to break, so you can specify it like:
.popover-content {
word-wrap:break-word;
}
Since your columns already have the width specified, if the text inside the div exceeds it, break it at that point.
DEMO
This is because your markup is wrong. A row in Bootstrap is what nests your columns. You have nested columns inside other columns, which is not correct.
<div class="row">
<div class="col-xs-12">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
</div>
</div>
You also only need to use row and col-x-x classes is if you want to use columns in the tooltip. So you don't really have to use them if you are displaying simple text.
Finally, if you want multiple rows of text, just a p element to split the text.
Caveat: I'm not actually sure you can use the grid inside tooltips. So you might be better off using simple text without columns...
class on the same div
<div class"myClass1 myClass2">
Can myClass1 behave like this
.myClass1 .myClass2 {background:#ff0000}
in css?
Yes you can use (multiple) as many classes as you wish but syntax is without any spaces:
.myClass1.myClass2 {background:#ff0000}
They can overwrite behavior.
In you example you have actually specified a child selector.
e.g
.myClass1 .myClass2 {background:#ff0000}
Would effect the div myClass2 if nested in myClass1
<div class"myClass1">
<div class"myClass2">
</div>
</div>
What you want is
.myClass1.myClass2 {background:#ff0000}
Which would work with
<div class"myClass1 myClass2">
</div>
This is the basis of how OOCSS works.
You can concatenate classes like this, .myClass1.myClass2, leaving out the gap in between. It's not a cascade in your case.
I do believe there are issues in older browsers when doing this, however.
you need to wright,.myClass1.myClass2 {background:#ff0000}
this will apply to those elements having both of this class.
This will affect classes as following
.myClass1 .myClass2 {background:#ff0000}
<div class="myClass1">
<div class="myClass1">
</div>
</div>
myClass1 will only be affected by such elements
.myClass1{
}
I’m not entirely clear what you’re asking, but if you want to style an element based on whether it has two specific classes on it, you can do so like this:
.myClass1.myClass2 {
background:#ff0000;
}
This will give all elements that have a class of myClass1 and a class of myClass1 a red background, e.g.
<div class="myClass1">This won’t have a red background.</div>
<div class="myClass2">This won’t have a red background.</div>
<div class="myClass1 myClass2">This will have a red background.</div>
<div class="myClass1 myClass2 myClass3">This will have a red background.</div>
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>