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%;
}
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.
I´m using the JQUERY UI Accordion with full height and width.
All ok with that. But, when I try to put a DIV (cover) above all, it appears BEHIND the accordion. I tried all (all I can or know) and more, but nothing happened. The same result.
Example:
For Style
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
}
For HTML
<body>
<div id="cover"></div>
...
THE REST
...
Anyone had this problem or know HOW TO fix it?
Thanks you!
Try adding z-index
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
z-index: 10000;
}
On the other elements that are going to be behind it you can make their z-index lower.
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%;
}
When moving through the list of suggestions in IE the graphic indicating the currently selected item extends past the vertical scrollbar. Is there a way to keep it within the visible area of the list?
I'm using IE7 and jQuery UI 1.8.16.
I have the autocomplete styled like so:
.ui-autocomplete {
width: 190px;
max-height: 132px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
* html .ui-autocomplete {
height: 132px;
}
.ui-autocomplete li {
font-size: 12px;
}
already tried overflow-y: scroll; ?
You can't use "auto" without setting a fixed height, and I think "max-height" didn't work on IE7.
Good luck!