I want to change the title style of the Angular Dart material-expansionpanel.
If I use the following CSS, the content style change (p.ex. radio group) but the title does not change style.
material-expansionpanel {
font-weight: bold;
}
What do I need to do to change the style of the title?
Since the style is encapsulated you need to use one of our mixins or ::ng-deep to break the encapsulation. Since there isn't a mixin for this you can do.
:host ::ng-deep header .primary-text {
font-weight: bold;
}
The :host is to keep the scope to the current component so it doesn't leak out. ::ng-deep breaks encapsulation and the rest is the selector.
I've never used AngularDart before, but from the examples, I think you have to target the panel-name class to style the expansion panel header:
.panel-name {
font-weight: bold;
}
Related
When Card title is too long, it's will became 'Lorem ipsum...'.
I would like to make the text to next line instead of '...'.
I manage to found this css can help, but where can I change it globally?
.ant-card-head-title {
white-space: initial;
}
Almost right...
.ant-card-head-title {
text-overflow: unset;
white-space: unset;
}
or initialif that is your preference. Put it in a .css file that you import into all javascript files where you add the <Card>
I'm completely new to Pixate Freestyle in Xcode and while experimenting with it, I couldn't get any padding to work on a UIButton. Other properties like background-color, border and border-radius are working but the padding doesn't seem to do anything.
Is there anything I have to do in order to add padding to a button ? Or is it that buttons simply cannot be padded?
I'm using Xcode 7.0.1 and the latest version of PixateFreestyle.
Thanks! :)
Think you need to use background-padding You can see documentation here
For example, using the video as a guide, I can make a button styled like this:
But then if I set background-padding: 50px; It will appear like this:
If you are using negative values, you should keep in mind that the button will not grow larger than the frame set in your storyboard or .xib.
The CSS I used was:
.btn-green {
color :#446620;
background-color:linear-gradient(#87c44a,#b4da77);
border-width: 2px;
border-color:#000000;
border-style: solid;
border-radius:10px;
font-size: 13px;
background-padding: 50px;
}
I want to remove the background-color effect applying when clicked on tab in angular material:
Here is the link of md-tabs
When I click on the tab, I can see a background-color is applying to the div element:
Here is the screenshot
I tried to over-ride the style with the following code, but not taking into effect:
.md-ripple-container:active{
background-color: none; !important
}
Help!!
Just use the .md-tab.md-active class in css. see the below example.
http://codepen.io/next1/pen/JXbVQN
You can override material styling from your scss/css. Like this:
/deep/ .mat-tab-group.mat-primary mat-tab-label-active{
background-color: red;
}
Due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered.
I am using simple form for bootstrap in my rails app. I am trying to figure out how to style radio buttons in my form. The radio buttons for Yes and No are right on top of each other (and very close to the button field). I'd like to add padding to each segment (so space in between the button and the label and then more space between the two options.
I have tried this (to see if I can even force CSS styling into my form. It isn't working at all (the text isn't even changing the font-weight - which is my test to see if it works).
<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {}, {:class => "create project"} %>
I have a css.scss file for projects with this class defined:
.createproject {
font-weight: normal;
padding-right: 20px;
}
My first question is how to I add CSS styling to Simple Form components (yes I have read the Simple Form documentation and I can't figure out the answer from that) and then, how do I add padding to each component of the attribute (so there will be padding between the button itself and the label and then more padding between the yes and no options)?
Thank you
First, change your CSS class from 'create project' to 'create-project'
Then try something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input {
margin: 5px 5px 0px 5px;
}
label {
margin-right: 20px;
}
}
To style just the radio buttons (and not all the inputs and labels in the form), you can do something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input[type=radio] {
margin: 5px 5px 0px 5px;
}
label.radio {
margin-right: 20px;
}
}
It sounds like you might not be using your browsers CSS editing tools to adjust element styling (F12, or right click -> inspect element). This tool should give you insight into how simple_form_for structures the DOM.
Your class name in your form element is "create project", but the CSS class is createproject. Have you tried removing the space in the former?
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.