I'm a new one in css and can not to set up the max-width of my confirmation dialog properly. Here my code of calling dialog:
this.$mdDialog.show({
content: longText,
ok: 'OK',
cancel: 'CANCEL'
clickOutsideToClose: true,
});
The problem is that my longText doesn't carry and my dialog is very stretched horizontally.
I tried to add style.less locally and determine max-width like this:
.md-dialog {
max-width: 300px;
}
But there is no changes.
Could some one help me?
To achieve what you want you should use this way:
.md-dialog-content {
max-width: 300px;
}
you can try
md-dialog{
max-width: 300px;
}
because md-dialog is not a class it is directive which angular material predefine
Related
Im trying to edit the mat-dialog-container but Im not able to, I tried with :host::ng-deep and also I look for answers of this and I found that I should be ablo to give it style by adding a class, but the style is not changin, here is the code about what I found
for the style.css file
.custom-dialog-container .mat-dialog-container {
overflow-y: hidden !important;
display: flex !important;
background-color: red;
}
For the ts componen
abrirForm(id:number){
const data = id??null
this.ventana.open(ModalInspeccionComponent,{data:data, disableClose:true,maxWidth: '100vw', panelClass: 'custom-dialog-container'}).afterClosed().subscribe(e =>{
if (e) {
console.log(e);
}
})
}
The dialog opens outside of the component, so styles in the component file will not be applied to it. Place your styles for .custom-dialog-container in your root css/scss file, and they should apply to the dialog then.
Here is a minimal example: https://stackblitz.com/edit/angular-ivy-ggzfwu?file=src/styles.css
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I've been working on a pyramid website and I'm having a problem. I have a textbox inside my td, and if the text is long, it cannot be seen already. Here is what it looks like:
As you can see the level1 portion there, if I have a name like someLongnameforever, it will only be seen like this:
Is there a fix for this using css or any trick? I am using bootstrap by the way.
If you want to see my table code, click this. I'm using twig templating also.
For now I am already using a textarea for the level 1 fields.
Why don't you try ellipsing if it exceeds the maximum width available to it. And maybe try showing the complete name in a tooltip?
That would keep the table clean too.
Demowrap word to new line if there is overflow
button{
word-wrap:break-word;
white-space: normal;
}
You can add an overflow: scroll; to allow scrolling or you could add an ToolTip attribute so when users however they will see the full content.
I guess you can do something like this.
You should be able to change the example to fit your needs.
HTML
<div id="fitin">
<div>Lorem im Lorem im Lorem im Lorem im</div>
</div>
JS
$(function() {
var $fitin = $('#fitin');
var $fitindiv = $('#fitin div');
$fitindiv.css('font-size', '1em');
while( $fitindiv.height() > $fitin.height() ) {
$fitindiv.css('font-size', (parseInt($fitindiv.css('font-size')) - 1) + "px" );
}
});
CSS
#fitin {
width: 100px;
height: 30px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
Check the fiddle
Link for reference is here: http://www.roi-owa.com/
The sidebar column (on the right) is written like this...
#aside {
background: #ffffff;
width: 220px;
overflow: hidden;
}
The main content column (on the left) and wider....is written like this...
#content.alpha,
#content.beta {
width: 700px;
background-color: #ffffff;
background-image: none;
}
The problem is that with how this theme is written...the aside column isn't contained inside a floated container with the content div...so I might be stuck. I don't want to start rewriting theme files, I just want the right column to stretch down to the height of the #content div. Not sure if its possible.
Unfortunately I don't know of way for this to be done in pure CSS, since the columns know nothing about each other. However, some simple Jquery could be used.
The idea is to check the height of both and set the shorter one's height to the longer one's height. It should look something like this in jQuery:
var contentHeight = $("#content").outerHeight();
var asideHeight = $("#aside").outerHeight();
if ( contentHeight > asideHeight ) {
$("#aside").height( contentHeight );
}
else {
$("#content").height( asideHeight );
}
Build a form Contact us by EMAIL me form I uploaded it to my server, and I want to change the CSS file the error location (when you click on the submit button, then all fields not filled properly marked an error - red) My question is simple: How do I can change the CSS file so that the error diaphragm on the left and not on the right? Thank you!
The form is in this link: http://lawb.co.il/HTMLPage.html
the CSS file is in this link: http://lawb.co.il/contact_us.css
You can see example for what I want here:
insted of this
Is is possible?
Add promptPosition:"topLeft" in contact.js:
EMF_jQuery("#emf-form").validationEngine({
validationEventTriggers:"blur",
scroll:true,
promptPosition: "topLeft"
});
And these lines in CSS:
.formError {
...
left: 360px !important;
...
}
.formError .formErrorContent {
...
width: 310px !important;
...
}
formError .formErrorArrow {
...
left: 70%;
...
}
It should work.
try this
align:left;
or
float:left;