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;
}
Related
I have a datatable with primefaces:
<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">
and produce something like this:
As you can see, it has scrollwidth attribute, but the header got scrolled to the far right. I want only scroll the content of datatable, not the header and footer (paging). Can anyone help me?
This can be done by CSS only, forget about the scrollable attribute of the <p:datatable> component, apparently it will always overflow the whole table, and not just the content.
In this case, do the following:
Remove the scrollable and scrollWidth attribute from your <p:datatable> component;
Include another CSS class (any name, but keep this name to be used later, in this case I will use the name 'overflow-content') in the styleClass attribute from <p:datatable>;
Include the following CSS rule in your page:
-
.overflow-content .ui-datatable-tablewrapper table {
overflow: auto;
width: 2500px;
}
The result will be something like this:
For this you need to first add the option scrollX: true and should add css to table width:100% inline.
$('#example').dataTable( {
"scrollX": true
} );
and you are done.
I am trying to have two different Font Sizes in the same Table th cell
My code is as below but does not appear to work i.e. the (Frm) stays at font 14
Please help
echo "<th width='70%' style='background-color:#FFD8D8;font-size:14px' colspan=\"14\"><left>".$startlocation."<style='font-size:8px'>"."(Frm)"."</left></th>";
There is no such element called <left>. What I would recommend you do, is add classes to your elements instead of using inline styling through style=.
th {
width: 70%;
background-color: #FFD8D8;
}
.left {
font-size: 8px;
}
.right {
font-size: 14px;
}
Then you can add a <span> tag around your text, which can look something like this as your final code:
echo "<th colspan=\"14\"><span class=\"left\">".$startlocation."</span><span class=\"right\">(Frm)"."</span></th>";
I'm not sure what your other text is inside the <th> element, but doing what I did will solve it. It's also best practise to use classes and IDs instead of inline styling, as it's easier to change in the future.
EDIT: If you absolutely need to to inline styling, this will work:
echo "<th colspan=\"14\"><span style=\"font-size:14px\">".$startlocation."</span><span style=\"font-size:8px\">(Frm)"."</span></th>";
Insert <span> like this:
...$startlocation."<span style='font-size:8px'>"."(Frm)"."</span></left></th>"
so that you can specify style of some element the way you tried.
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
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 a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});