I asked this over on the Sencha forum as well..but haven't received any answers..it is holding up my implementation of the locking grid...I am hoping one of you knows the answer..
using ExtJS 4...
I am trying to get my grid columns that are numbers to have text-align right...
I tried the suggestion in the grid faq (http://www.sencha.com/learn/Ext_FAQ_Grid) of using CSS in the column def..but its not working. What am I doing wrong?
Here is the code for one of my columns that needs to be right aligned:
text : 'ROAMING',
width : 125,
sortable : true,
css : "text-align : right;",
dataIndex: 'ROAMING'},
the grid cell for this column looks like this for the first row of the grid when expanded in Firebug:
<td class=" x-grid-cell x-grid-cell-gridcolumn-1032 ">
<div class="x-grid-cell-inner x-unselectable"
style="; text-align: left;" unselectable="on">0</div>
</td>
which clearly shows the field is being interpreted as align left...
Thanks,
--Sue
Change 'css' to 'align', and set the value as below:
text : 'ROAMING',
width : 125,
sortable : true,
align: 'right',
dataIndex: 'ROAMING'},
I did this yesterday in ExtJS 4 for the first time, and I was surprised that it was that easy. I was mainly surprised because older versions of ExtJS have so many search results with people implementing exotic ways to get grid aligning.
...I hope that helps in your situation as well :)
Related
When typing in input fields safari is creating a dropdown based contacts. I can't figure out how to hide this dropdown. I am able to hide the contacts button.
I'm running Safari Version 11.0.1
Fiddle to reproduce:
https://jsfiddle.net/27n5jL40/1/
<input type="text" name="fname"><br>
Hiding the auto-fill-button
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
Well, I realize this answer probably comes a bit late, BUT I think I can help. I have found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".
In my application, it was competing with a custom autofill. I defeated my dropdown as follows:
I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to First Name. The character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!
Wish I'd found some clever css, but this was the best I could come up with.
I have made a table (with child rows) using jQuery plug in dataTables. I'm having trouble finding out how to apply a style to an individual column of cells (<td>)
I've made an edit to this existing fiddle as you can see I've made the text larger in column 2, but I also want to make the text larger (plus other styling) in column 4 and 5.
I put a class in line 114 in the CSS (this is the original css from dataTables) and this made the text bigger,
.sorting_1{
font-size: 29px;
line-height: 29px;
}
it didn't work for the other columns (as I assumed .sorting_2, .sorting_3 (etc) was the class to change it). When looking at the inspect panel you can see the <td> tag for the the changed cells all have the class of sorting_1, but the others don't and I'm not sure how to do that,
How would I do this?
Each row has the class of either even or odd so you could use nth-of-type to specify the td that you want to style and go from there. You would have to style both the even and odd column so you would have to specify both like so:
.even td:nth-of-type(4),
.odd td:nth-of-type(4){
background:red;
}
.even td:nth-of-type(5),
.odd td:nth-of-type(5){
font-size:20px;
}
Or you could specify it by the role attribute and use nth-of-type like so:
tr[role=row] td:nth-of-type(4){
background:red;
}
tr[role=row] td:nth-of-type(5){
font-size:20px;
}
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help
I have a Bootstrap 3 layout like this
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
Normally this displays the first column as 66% and the second column as 33%
When I have no content for the second column, I want to be able to hide it and make the first column take up 100% width. I think it can be done with a mixins but while I'm trying to get that working, is there a better way?
If it's empty you can add the class .col-md-12 after col-md-8 and add class .hide to the col-md-4. I don't know how you're implementing your site. If it's a CMS, you can have a little checkbox to add these classes if col-md-4 == empty.
If you're hiding at different breakpoints, look at the responsive utilities section of the TWB docs.
Is there any way to highlight (show selected) current date in dojo DateTextBox when the text box is empty? I do not want to show the date in the text box (it should remain empty), but just to show today's date as selected.
I tried to use the 'dropDownDefaultValue' attribute provided by dojo for this, but it is not working (current value is not shown as selected or highlighted).
I am using dojo version 1.7.1.
Any suggestions in this regards that will be great.
If you look at the html that is used for the DateTextBox popup you'll see that the td for the current date looks like this:
<td class="dijitCalendarEnabledDate dijitCalendarCurrentDate dijitCalendarCurrentMonth dijitCalendarDateTemplate" role="gridcell" data-dojo-attach-point="dateCells" aria-selected="false" tabindex="0">
<span class="dijitCalendarDateLabel" data-dojo-attach-point="dateLabels">30</span>
</td>
If you want to style the current date so that it appears differently you should update add a css selector like
.dijitCalendarDateTemplate.dijitCalendarCurrentDate{
/*your styling */
background-color: green;
}