We Keep Coding

Reset tab content scroll position on tab change

I'm using PrimeNG TabView, i have enabled vertical scrolling inside the tab content, the problem is that when I change tab, the content horizontal position is the same as the previous. I'm only using JS/TS, CSS, HTML, PrimeNG for the tabs and Ionic Framework.
I want the content of the new selected tab to be at the initial state, "unscrolled"

#FabianStrathaus It is more efficient to look directly at the code in this official documentation, it is what I used, plus however I added this CSS:
:host ::ng-deep .p-tabview-panels {
height: 38vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0px;
}
looking at the documentation again I maybe figured out what the problem might be, I set horizontal scrolling to p-tabview-panels, maybe I should have set it to p-tabview-panel, the differences:
p-tabview-panels are the Container panels.
p-tabview-panel is the Content of a tab.

Bootstrap - Switching between Div with Jquery

So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR

Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}

color, insert link and insert image popup not showing in wysihtml5

Hey every one I have following issues color, insert link and insert image popup not showing in wysihtml5. when i check the inspect element the div insert image button after update and in inspect element
<div class="bootstrap-wysihtml5-insert-image-modal modal fade in" style="display: none;">
and this is automatically add when i click the button style="display: none;"
this have modal class and modal class inherit from bootstrap. modal class have two properties
overflow: 'hidden';
display : none;
when i remove this property from inspect element popup is showing other wise popup not showing what should i do please help me..

The overflow: 'hidden'; part is wrong. Also remove display: none; as it is already done programmatically. Finally your code should be:
overflow: hidden;

The reason that the modal does not show is because display: none will make it invisible. overflow: hidden may also hide the content if the width and height of the modal are now set accordingly.
To show the modal you should apply display: block or something similar to it.

Try replacing this..
overflow: hidden;
and remove the display:none

Overlapping dropdown

I want to embed a dropdown div in a wrapper div that has 0 height, so that it takes no space whether or not it is shown, and when it is shown, it overlays the contents placed below. Suppose that dropdown element is a div with content Foo. I did something like:
HTML
<div class="dropdown_wrapper">
<div id="dropdown_content">Foo</div>
</div>
CSS
.dropdown_wrapper{
height: 0;
overflow: visible;
}
And through Javascript, I switched the #dropdown_content's style between display: block and display: none. When it is the former, I expect the content to be shown, but it is actually not shown, hidden within the wrapper div that has 0 height.
How can this be fixed?

you probably do not want the wrapper to use any space in the document. to use it as an anchor point use
position: absolute;
overflow: visible;
on the wrapper. this way the content will set it's own bounding box.
the rest seems to work as you intended. check this FIDDLE

Kendo UI dropdownlist takes size of biggest option

var ddlViews = $('#ddlViews').data("kendoDropDownList");
ddlViews.list.width("auto");
I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.

.k-list-container{
min-width:126px !important;//give a min width of your choice
width: auto!important;
}
.k-list
{
width:auto !important;
}
link to js fiddle

We can set width in 2 ways for Kendo UI combobox list width.
Answer-1
*For static way*
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
Answer -2 Dynamic way using css
.k-list-container
{
white-space: nowrap !important;
width: auto!important;
overflow-x: hidden !important;
min-width:243px !important;
}
.k-list
{
overflow-x: hidden !important;
/*overflow-style: marquee;*/
overflow-y: auto !important;
width:auto !important;
}
This above css code will work for in dynamic data load.

.k-dropdown {
max-width:10em !important;
}
Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.
The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.
Thanks for answering.
Hope this helps !
Raza

Follow this answer to set width on your Dropdownlist : Kendo dropdown width
.k-dropdown {
width: 250px;
}

kendo has now full support for that, with the autoWidth option
<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>

To set dropdown box fixed width(for list only), use
ddlViews.list.width(200);
To set fixed width for dropdown whether list is active or not, define width in css as
<select id="ddlViews" style="width:200px;" >
<option></option>
</select>
I was able to show option content in a single line through css as
ddlViews.list.css("white-space","nowrap");