While using the tablesorter css default theme, if I avoid to set the table width I get a nice table with all columns perfectly adjusted to the longest field.
BUT, If I add filter widget, all columns appear much wider than before, with a lot of empty space. Sometimes text columns are wraped, while others look nearly empty.
Can this behavior be avoided? Thanks!
The filter inputs inherent size depends on the browser, the version and your OS. So simply adding an input into a table cell will stretch it to that size. But you can set a max-width or width using css.
I've updated the demo you shared, with this css to show how the theme set style can be overridden:
.tablesorter, .tablesorter .tablesorter-filter {
width: auto;
}
If you want the columns narrower, just set the input width as a pixel size (demo):
.tablesorter {
width: auto;
}
.tablesorter .tablesorter-filter {
width: 50px;
}
Update: if you need different width inputs, try this css (demo):
.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter {
width: 80px;
}
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter {
width: 40px;
}
where the 4 in 4n is the number of columns in the table (one-based-index)
You can change size of each text boxe using the following style
#sites_list_table .tablesorter-filter-row td>[data-column="1"] {
width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="4"] {
width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="6"] {
width: 100px;
}
(#sites_list_table is the id of the table)
If you have unbroken strings in your table data you may need to try changing:
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
To:
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
max-width:400px;
word-wrap:break-word;
}
(this worked for me in Chrome and IE11)
Another way to get rid of some empty space is setting the width to 100%
.tablesorter .tablesorter-filter {
width: 100%;
}
Related
So I'm using Basecamp's Trix editor for a Ruby on Rails project.
What I'm trying to do is make the uploaded/ attached image fit to the width of its parent.
Trix automatically embeds the height and width of the image on the element itself.
Any way I can stop trix from doing this?
Maybe if you supplied your code, I can give you an exact answer. But what you can do is target the elements with CSS and then set the rendered dimensions thus:
.col-sm-10 a {
text-align: center;
img {
width: 600px;
height: 400px;
display: block; #ensures the caption renders on the next line
}
where .col-sm-10 is the class enclosing the <a> tag which in turn enclosed the <img> tag. Of course, the class will be different depending on your HTML.
Use inspect on your browser to determine the relationship.
Good luck.
UPDATE:
A better method would be to target the image like so:
#post-show-body a {
text-align: center;
img {
max-width: 100%;
height: auto;
max-height: 100%;
}
}
To resize the height and width of the attached image, you can simply add trix-content class to your trix-editor tag. And then make sure also to include the class into the result div. From there you can adjust trix-content class from your application stylesheet as usual.
The other way is to copy the trix stylesheets folder and play around with .attachment and img tag from within the content.scss
The following is how mine looks like:
img {
max-width: 500px;
height: auto;
}
.attachment {
display: inline-block;
position: relative;
max-width: 50%;
margin: 0;
padding: 0;
}
Read Styling Formatted Content https://github.com/basecamp/trix
In your \app\assets\stylesheets\actiontext.css you can define the image properties.
Mine looks like this.
.trix-content img {
max-width: 70%;
height: 450px;
}
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
This is the datepicker that I want to set my custom horizontal size:
https://material.angularjs.org/1.0.5/demo/datepicker
This works for me in Angular Material 6
.mat-datepicker-content .mat-calendar
{
zoom: 0.85;
}
Not sure if this is what you mean but to set the horizontal size of the input of the date picker you can override css class as follow
.md-datepicker-input-container {
width: 300px;
}
I was able to solve this by setting the display to block on the mat-form-field. I have other form controls which I'm trying to have matching width's so this solution worked for me. Might work for someone else.
In HTML:
<mat-form-field class="display-block">
<...date picker and other form elements...>
</mat-form-field>
In css:
.mat-form-field.display-block {
display: block;
}
update below CSS class for the page or globally, this will help to reduce the icon line-height and height so we can reduce the height of the datetime picker.
.mat-icon-button {
padding: 0;
min-width: 0;
width: 40px;
height: 16px;
flex-shrink: 0;
line-height: 12px;
border-radius: 50%;
}
This has been bothering me. Although I've resolved my problem using padding for the container to create the desired height of the container, I'm still puzzled on why this happens.
I have a container with two child elements inside, like so:
<div class="container">
<img src="http://placehold.it/30x30" id="first-item"/>
<img src="http://placehold.it/50x50" id="second-item"/>
</div>
I vertical align the children to the container using the below:
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
However, if a fixed height is set for the container, the vertical alignment breaks.
Why is this so?
http://jsfiddle.net/Nx8Jc/
It will work if you add a line-height property with an identical value to the height:
.container {
background-color: #EADDBB;
height: 100px;
line-height: 100px;
width: 100%;
padding: 20px 20px;
}
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
Demo: http://jsfiddle.net/galengidman/Nx8Jc/1/
I have an element, which Opera displays higher than it should be (53 instead of 35 px). So, I have tried to explicitly set the style of this jquery-ui element. When I look at the element with Dragonfly, this is what I see in styles:
.ui-tabs-nav {
height: 35px;
max-height: 35px;
min-height: 35px;
padding: 0px;
vertical-align: bottom;
}
Looks like it is set (there would be strikethrough the rows otherwise, right?). Min-height, max-height and height the same - 35px. But this is what 'Computed style' looks like:
height: 53px;
max-height: none;
min-height: 35px;
Do you have any ideas on what might be wrong? Why is max-height property ignored and height is computed with digits (by chance) switched?
Can I ask why you are using the same value for min and max height? If you are trying to limit the height of the item to 35px consider using overflow:hidden.
.ui-tabs-nav {
height: 35px;
overflow: hidden;
padding: 0px;
vertical-align: bottom;
display: block; /* if it is not a block element already */
}