I am trying to override existing sass styling of ion-card, by changing the headers padding to something that fit my app.
I did the following:
ion-card-header{
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
But nothing changed. I tried to add a background color to check it is getting the styling:
ion-card-header{
color: red;
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
And the color changed to red. But the card-header-md is not changing. I need to change it on iOS and Android.
Here is a stackblitz for it.
The issue is that the card-header-md class is at the same level as the ion-card-header class. So this should work:
ion-card-header {
&.card-header-md {
padding-right: 20px
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
I've removed the !important because I think you don't actually need them (just tried in a new stackblitz demo and it's working fine without them).
Related
this seems like such a simple thing to do, but I can't seem to do it. I've tried using CSS in my scss file, like this:
.ag-header-cell-text {
font-size: 8px;
color: red;
background-color: red;
}
or like this:
.ag-header-cell
font-size: 8px;
color: red;
background-color: red;
}
but nothing changes, not the color either. setting the headerheight works but doesn't help me. I just want the font smaller.
I've also tried adding a cellStyle property to the columnDefs, but nothing seems to works, nor can I find a solution. Please help.
Adding !important may work.Or maybe your class names don't correct. Check it by f12 (inspect) and correct.
.ag-header-cell-text {
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
.ag-header-cell
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
I want to style my CF7 checkbox using pure css.
I have placed it within a label and used this code.
.wpcf7-checkbox label input {
position: absolute;
margin-left: 6px !important;
right: 0;
width: auto;
opacity: 0;
}
.wpcf7-checkbox label span.wpcf7-list-item-label:before {
content: '' !important;
border: 2px solid #dbdbdb !Important;
border-radius: 5px !Important;
cursor: pointer !Important;
display: inline-block !important;
float: right !Important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important;
}
.wpcf7-checkbox input:checked+span.wpcf7-list-item-label:before {
background-color: #000 !important;
background-image: url(http://test.unknowndesign.co.za/wp-content/uploads/2018/02/checkbox_tick.svg) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 80% !important;
}
Here is the HTML for the checkbox:
<span class="newsletter"><span class="wpcf7-form-control-wrap mailchimp"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first last"><label><span class="wpcf7-list-item-label">Sign up for our newsletter</span><input type="checkbox" name="mailchimp[]" value="Sign up for our newsletter" /></label></span></span></span></span>
But when I click in the checkbox, the checkbox tick doesn't display. What am I doing wrong?
I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.
You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!
Let's say I have a span with a dashed underline:
<span class="underline">Hello, I'm underlined text</span>
.underline {
color: #444;
font-size: 250%;
display:inline-block;
border-bottom: 1px dashed #444;
}
I need a bottom drop shadow for the underline. I assume box-shadow is not the case and the only possible solution is to do it by the means of pseudo elements.
I'm doing this way:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
}
This displays the red dashed stroke above the underline but I need to do that below the underline.
How is that possible?
Thanks in advance.
Use position: relative; like this:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
position: relative;
top: 2px;
}
I'm not sure why you don't want to use box-shadow (unless its a browser problem) But it would solve the problem.
box-shadow: 0px 10px #888888;
.underline {
color: #444;
font-size: 250%;
box-shadow: 0px 10px 10px #888888;
display:inline-block;
border-bottom: 1px dashed #444;
}
hope this helps
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.