I am using material Ui v5.8.4 in reactjs, but I can't find a way to add border spacing to the table component. For a typical HTML CSS environment, the style is as bellow
table {
border-collapse: separate;
border-spacing: 0px 15px;
}
how can I achieve the same in material UI tables?
I just figured all I needed to include was sx props to the Table component with the following properties.
sx={{
borderCollapse: "separate",
borderSpacing: "0px 10px"
}}
Related
I have a button with shape round as follows:
<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>
The class shadow-red is:
.shadow-red{
box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
border-radius: 5px;
}
And the result is:
So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.
.round{
border-radius:5px!important;
}
I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.
I have also tried to add to variables.css the following lines and none of them worked:
--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.
<ion-button expand="block" class="shadow-red">Signup with</ion-button>
Use the following CSS custom properties as described in the Ionic 4 docs.
.shadow-red{
--border-radius: 5px;
--box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}
Result:
Following code worked for me. As per your need change the height and width value to meet your requirement.
<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
<ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>
Posting here for future references.
If you want to change the ionic button radius we can use following css. it is working on expand="block" attribute
ion-button {
--border-radius: 20px;
border-radius: 20px;
}
But in ionic button, when we use expand="full" attribute it does not work. so to overcome this limitation we can use CSS Pseudo-elements.
to add a border radius to the bellow button
<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>
as bellow image we need to select the native element within the shadow DOM
we can use below Pseudo-elements selector
ion-button::part(native) {
--border-radius: 20px;
border-radius: 20px;
}
above will add the radius on the ionic button with expand="full" attribute
I am using Ionic Framework to build an Android Application. I need to display horizontally scrollable cards. Each card will display a product image, product title, product price and a button. I tried using ion scroll in x-direction, but cards doesn't seem to scroll in x-direction.
I tried using this plugin, but it seems like it can be use only with ion-pane and i am using ion-content.
In the meanwhile, i found another solution -
<div class="cardHolder">
<ul>
<div>
<img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" >
</div>
</div>
CSS
.cardHolder {
height: 200px;
width:100%;
padding: 8px;
margin: 6px;
}
ul {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.examplePic {
height: 150px;
width: auto;
border:1px solid black;
margin: 2px;
}
The issue with this solution is that, I am only able to retrieve the image and not the other details.
You should look into ionic's built-in ion-scroll. Your code would look something like this. Also checkout this example
<ion-scroll direction="x">`
....your scrollable content here...
</ion-scroll>
Also checkout this example
I am trying to fit my website for iphone
for that i am using twitter bootstrap responsive css
i gave the container with different border colors for different width
but when i minimize the browser window the border colors are not reflecting for the browser window
http://jsfiddle.net/CXkQp/1/
http://jsfiddle.net/CXkQp/1/embedded/result/
#media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
border: 1px solid red;
}
If I understand your question correctly, the page example you posted should be responsive, though I'm not sure that your bootstrap grid is setup the way you need it.
You have nested container divs for one thing # lines 120 and 145
Check what happens if I rename your 2 container divs:
http://jsfiddle.net/panchroma/CXkQp/3/embedded/result/
http://jsfiddle.net/panchroma/CXkQp/3/
line 120
<div class="containerA" style="background-color: white;">
line 145
<div class="containerB">
There are also some validation errors which could possibly be another piece of the puzzle. The cause may be that you can't simply paste HTML head content into the jsFiddle HTML panel as you have done. Check http://doc.jsfiddle.net/use/hacks.html#css-panel-hack for details on what you need to do.
My appologies if I've misunderstood something
Good luck!
I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:
<div class="page-header">
<h1 data-name="about">About Campaign Title</h1>
</div>
And here is the CSS:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
}
I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.
Thanks.
This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
text-rendering: auto;
}
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.