Just created a registration form, and I want to extend a label text to be shown into one line. With CSS inspector found that class is:
.rmagic .rmrow .rmfield label
and when I insert:
width: 600px;
It is working fine, but extends all other fields as well, and I just need the last one. I set a custom class to that field, called posledno but when I insert it into my custom CSS:
rmfield.form_1_1-element-18.posledno label {
widht:600px;
}
It doesn't make any changes. How to extend this field ? Page example at the bottom.
and I just need the last one
Since you need the last-child of an element, you're better off using the :last-child selector.
Here is what would work:
#rm_form_page_form_1_1_1 .rmfieldset .rmrow:last-child .rmfield label {
width: 600px;
background-color: #f00; /** for easier identification */
}
Although I would recommend using % instead. (relative to the parent element unit)
Related
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
I have a basic tab collection. Its going to function as buttons, no actual content:
<md-tabs md-align-tabs="bottom">
<md-tab>Canvas 1</md-tab>
<md-tab>Canvas 2</md-tab>
<md-tab>Canvas 3</md-tab>
<md-tab>Canvas 4</md-tab>
</md-tabs>
I'm trying to use the tab collection at the bottom of the page. Any idea about how to move the ink bar to the top of the tab collection instead of the bottom?
md-align-tabs does not change the location of the ink bar in my testing. I was unable to identify a solution with pure CSS.
You are looking to override the md-pagination-wrapper css value. I would not recommend doing it globally because I don't know what else it effects honestly but if you change it to
md-pagination-wrapper {
height: 2px;
...
}
You will get the effect you are looking for. Here is a codepen for example - http://codepen.io/anon/pen/vKdkzj . I would put a custom override class or id on it though so you don't break anything globally.
An example of what the custom override would look something like this -
Put a custom id or class on your tabs :
<md-tabs md-align-tabs="bottom" id="ink-top-fix">
Use to target md-pagination-wrapper from custom id (or class, whatever you choose to use)
#ink-top-fix md-pagination-wrapper {
height: 2px;
}
override .mat-ink-bar class
.mat-ink-bar{
top:0px !important;
}
I have this code that changes the styling of the checkbox "tick" mark on selecting the checkbox,
.x-input-checkbox:checked + .x-field-mask:after {
//Your style here
}
P.S. The above code is only for the check mark not the whole field.
but I dont know how to change the background color of the checkbox field on selecting it using purely CSS (the whole field)
You have to manipulate the .x-field-mask class. .x-field-mask:after is only used to draw the tick.
.x-field-mask {
background-color: green;
}
should do the trick.
It is very convenient to style input tags using their IDs as they have more precedence weight than classes have.
For example, I have a default width for input.text elements in a specific container:
.details .metadata input.text { width: 200px; }
To change the width for a specific page, it's more convenient to use the ID instead of the long selector above:
#my_input { width: 150px; }
Now I have automatically generated input fields somewhere in my app (generated using form_for and nested_attributes_for in Ruby On Rails) which generates IDs like so:
#event_rules_attributes_0_interval
#event_rules_attributes_1_interval
#event_rules_attributes_2_interval
...etc...
and
#event_rules_attributes_0_count
#event_rules_attributes_1_count
#event_rules_attributes_2_count
...etc...
So I need to use an ID selector like "begins with event_rules_attributes_" AND "ends with _count" or "begins with event_rules_attributes_" AND "ends with _interval". I know that there are the [id$=] and [id^=] matchers, but can they be combined somehow?
Just found it out myself:
[id^='event_rules_attributes_'][id$='_interval'] { width: 150px; }
Seems a bit ugly, but works.
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}