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 :)
Related
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.
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 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'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
I'm trying to create a block which may or may not have a scrollbar, with a header that does not scroll. The trick is that the width of the header should be affected by the presence of a scrollbar.
I'm worried that this is one of those CSS use cases which should be trivial, but might, in fact, be impossible. Anyone willing to prove me wrong?
Here are a few pointers
http://davidchambersdesign.com/css-fixed-position-headers/
and there involve tables with fixed header and scrolling body
http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
http://anaturb.net/csstips/sheader.htm
You cannot do this with CSS alone. We must use javaScript. With jQuery you can do the following
var cw = $('#container').innerWidth(),
cs = $('#container').scrollTop();
$('#header').css({
'width': cw + "px"
});
$('#container').scroll(function() {
$('#header').css({
'top': $('#container').scrollTop(),
})
})
Check working example at http://jsfiddle.net/VswxL/2/
I haven't figured out how to do this with CSS alone. So, here's a solution which uses JavaScript (here, jQuery), but only runs when he content changes. If the size of your wrapper depends on the size of the window, you may also need to run it on resize. Here's the heart of it:
$.fn.fitTo = function(target){
var $el = $(this);
$(target).bind('refit', function(){
$el.width(this.clientWidth);
});
}
Call $header.fitTo($content) to bind the header to a custom refit event on the element with the content. Now, whenever the content changes such that a scroll bar may have appeared or disappeared, do…
$content.trigger('refit');
…and the width of the header is reset to the clientWidth of the element containing content. The header must be outside the scrolling element.
Working example