I'm working on a text dialog that I'll be reusing frequently in my app. My text dialog is fairly simple, it has a header, a message to display above the text input, the text input area, and an "Ok" and "Cancel" button.
From what I can see, the simplest way to adjust the width of a dialog is to pass it in with the MatDialogConfig object when calling open on the dialog, as so:
openDialog() {
var params = {
data: {
// my data getting pased into the dialog
},
width: "600px"
}
const dialogRef = this.dialog.open(TextDialog, params);
dialogRef.afterClosed().subscribe(() => { //do something after close });
}
This causes the window to increase to the preferred size, however all my elements inside the dialog's template do not increase in size. If I do not adjust the width when calling the window and I inspect the window's elements, the width is 228.27. The text input's width is 180.
When I increase the width of the element to 600, the input stays the same width. I've tried inspecting the dialog. Everything sits in the mat-dialog-container, including the div.mat-dialog-container element, both of those are the correct width. However, everything from the mat-form-field and below all still hold the original 180 pixel width. I can manually adjust the width with:
mat-form-field {
width: 600px;
}
But if I try using inherit or auto it doesn't work. Any help would be appreciated!
When using dynamic styling in Angular, use NgStyle.
This will allow you to pass expression-driven styling, thus letting Angular answer all the questions related to how and when to update the styles in the DOM.
I don't know why I didn't think of this sooner, but setting the width to 100% fixed the issue for me without any wizardry.
In my css file,
mat-form-field {
width: 100%;
}
This was all that was needed.
Related
I am new to HTML, CSS and Javascript.
I have an element (navigation dots) that should be visible only for a particular segment of my page. The rest of the time I would prefer it to be hidden. I tried using media query:
#media screen and (min-height:200vh) and (max-height: 600vh)
{
.invisible{
visibility: visible;
}
}
The segment is in one div. So would it be possible to make this div visible while hovering on the other div?
First of all using vh and vw in your media queries is not going to work. By definition 100vh is 100% of the viewport height of a device viewing your site. What this means is a min-height: 200vh media query will only apply to devices whose viewport is 2x higher than the device viewport itself. Nothing can be two times higher than itself, unless it's 0, so this media query will never take effect.
That said, I hope you can clarify what exactly you mean by segment and what you are trying to accomplish. Are you trying to...
Hide the nav-dots when a client's viewport height doesn't meet a certain value?
Hide nav-dots on a particular DOM element such as <p> or <div>?
Hide nav-dots when a user has scrolled past a certain threshold?
To answer the second scenario and your later question about hiding a div while hovering on another I propose the following solution. However I'd be happy to update my answer if this is not what you were getting at.
HTML:
<div class="container" id="my_segment">
<div class="nav-dots">
Navigation dots go here
</div>
</div>
Here we have assigned the my_segment id to the element we want to hide the nav-dots on. Note that you can use a unique id only once per page.
CSS:
.container {
display: inline-block;
background-color: #FFCCAA;
}
.invisible {
visibility: hidden;
}
JavaScript:
// Find our element
let seg = document.getElementById('my_segment');
// Add a mouseover event handler to our element
seg.addEventListener('mouseover', function() {
// Find nav-dots inside our element
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Remove the 'invisible' class
nav_dot_elements[0].classList.remove('invisible');
});
// Add a mouseout event handler
seg.addEventListener('mouseout', function() {
// Find nav-dots inside our element
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Add the 'invisible' class
nav_dot_elements[0].classList.add('invisible');
});
Codepen demo
Since you are new to JS I tried to keep this example simple. This only works if you use the 'hover to display' behaviour on one element and you only use one 'nav-dots' element inside this container. Try it out for yourself and let me know how it works!
I'm trying to get a content editable text box (div element) to grow as needed to fit the text typed into it, up to 80% of the width of the parent div.
Is there any way to do this with just CSS? If not, I'm open to Javascript solutions, but I am using React, which complicates things in that regard
This is NOT a duplicate of any other question I'm aware of, as it requires a solution which is:
Independent of viewport size
Supports a parent div with a max-width
Works on contentEditable
Works when the text content changes
May be you could have a div inside parent div which is 80% of the parent div. And then set width : auto for the text box.
Might sound a bit tricky.
I'm trying to get a text box to grow as needed to fit the text typed
into it, up to 80% of the width of the parent div.
I'm fairly certain this won't be possible via CSS alone, because there is no way for CSS to determine the length of the text-content of the textarea.
With javascript, on every keypress, you can check the length of the text-content and if:
the text-content is above a certain number of keypresses; and
the width of the textarea is still narrower than the maximum allowed width
then the textarea can incrementally expand.
Working Example:
var myTextArea = document.getElementsByTagName('textarea')[0];
var myTextLength = myTextArea.value.length
var myTextWidth = parseInt(window.getComputedStyle(myTextArea).width);
var myTextMinLength = 20;
var myTextMaxWidth = ((parseInt(window.getComputedStyle(document.body).width) / 100) * 80);
function checkTextLength() {
myTextLength = myTextArea.value.length;
if ((myTextLength > myTextMinLength) && (myTextWidth < (myTextMaxWidth))) {
myTextWidth += 8;
}
myTextArea.style.width = myTextWidth + 'px';
}
myTextArea.addEventListener('keypress', checkTextLength, false);
textarea {
width: 180px;
height: 40px;
}
<form>
<textarea placeholder="Start typing..."></textarea>
</form>
hm... try this:
display: inline-block;
I am not sure tho. Let me know if it works.
I am using the Select2 control in a bootstrap grid, but when i select a values from the drop down which is a bigger value (here i mean the width), it expands and overrides the width specified by the "col-md" class of bootstrap
though there are many workarounds mentioned on a similar issue
https://github.com/t0m/select2-bootstrap-css/issues/42
but none of them worked for me
please guide. how can i restrict the width to that of its container element
I've also tried various suggested workarounds with no effect. In addition, I needed the select2 control to resize correctly when the window was resized so I defined a reset_select2_size function which is invoked with each resize. Though not shown here, this function should also be invoked whenever any change in a UI component requires resetting the select2 size within that component (for example when a hidden div containing a select2 becomes visible).
This isn't pretty by any standard, but until the bug will be fixed is seems to work fine for me,
function reset_select2_size(obj)
{
if (typeof(obj)!='undefined') {
obj.find('.select2-container').parent().each(function() {
$(this).find('.select2-container').css({"width":"10px"});
});
obj.find('.select2-container').parent().each(function() {
var width = ($(this).width()-5)+"px";
$(this).find('.select2-container').css({"width":width});
});
return;
}
$('.select2-container').filter(':visible').parent().each(function() {
$(this).find('.select2-container').css({"width":"10px"});
});
$('.select2-container').filter(':visible').parent().each(function() {
var width = ($(this).width()-5)+"px";
$(this).find('.select2-container').css({"width":width});
});
}
function onWindowResized( event )
{
reset_select2_size();
}
window.addEventListener('resize', onWindowResized );
In that case Use fixed width and use overflow:auto then u can retrict the with of the div or any tag
I found a workaround to fix the issue,
on the input-group i changed the Display from table to Block , and that worked :)
I want to use auto width and add x pixels to it.
How can this be acheived Less file?
span
{
width:calc(auto + 100px);
}
I want to use auto, since I don't know the length of the text. But I know a fixed size text gets append to it at some point. I don't want the span to grow larger when this happen. Therefore, adding 100px to auto would handle it perfectly.
You should do this with JQuery.
window.onload = function(){
$('span').width($('span').width()+100px);
};
And the CSS code remains
span{
width: auto;
}
EDIT: If the span content changes after the onload function is being executed, then you should execute that line whenever the content changes.
Here you can find how to do this. Credits to #Emile
1- The jQuery change event is used only on user input fields because if anything else is manipulated (e.g., a div), that manipulation is coming from code. So, find where the manipulation occurs, and then add whatever you need to there.
2- But if that's not possible for any reason (you're using a complicated plugin or can't find any "callback" possibilities) then the jQuery approach I'd suggest is:
a. For simple DOM manipulation, use jQuery chaining and traversing, $("#content").html('something').end().find(whatever)....
b. If you'd like to do something else, employ jQuery's bind with custom event and triggerHandler
$("#content").html('something').triggerHandler('customAction');
$('#content').unbind().bind('customAction', function(event, data) {
//Custom-action
});
Here's a link to jQuery trigger handler: http://api.jquery.com/triggerHandler/
As stated by #Paulie_D, this wasn't possible.
Proposed solution to handle this with Javascript would probably work, but I prefer to avoid this solution as I don't like handling the layout with Javascript instead of HTML/CSS.
The solution I used :
Use a DIV instead of a SPAN. This allowed to add another div inside it with a fixed width of 100px. This way, the parent div size to content including this 100px child div. Thus making the +100 needed.
When extra content is added, child div is used to display the extra content instead.
<div class="ParentDiv">
TextWithVariableLength
<div class = "ChildDiv"></div>
</div>
LESS
.ParentDiv
{
width: auto;
}
.ChildDiv
{
height:100%;
width: 100px;
}
I am trying to force this form element to expand to 957px. Here is the page.
https://www.whiteribbonalliance.org/index.cfm/donate-usd
If you remove this you will have a chance to expand it:
style.css:57:
#primary form {
...
max-width: 504px;
}
max-width, as its name implies, tells the maximum width that the element can have.
I found it by simply using the Chrome Inspector.