I have an image column in a grid, and I show the image to 25px x 25px so it fits in the row nicely.
I added a hover to the images and when the mouse hovers on them there are supposed be offset from the left (which it does) and then the image is supposed to get bigger so you can see it better.
2 things are happening
1) When I hover on the image, its flickers continuously
2) Even though the image goes 100px to the left, it doesn't expand to the new size.
I have no idea why this is happening.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"' style='height:25px;width:25px;' alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList:hover a {
visibility: visible;
width: 250px !important;
height: 325px !important;
margin-left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
** Snippet Edit **
So now when I hover the image is no longer flickering, however when you hover over the image it moves left, and it shouldn't it should just stay in its spot and when hovered show a bigger version
Here you are:
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
url = GetCatalogImageLocation(url);
return `
<div class="imageOptionsList">
<a style="background-image:url(${url})" href="${url}">
<img src="${url}" alt="">
</a>
</div>
`;
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.k-grid td {
overflow: visible !important
}
.imageOptionsList a {
position: relative;
display: inline-block;
height: 25px;
width: 25px;
background-size: cover;
}
.imageOptionsList a img {
position: absolute;
top: 50%;
right: 50%;
width: 0;
height: 0;
transition: .5s
}
.imageOptionsList a:hover {
z-index: 1
}
.imageOptionsList a:hover img {
width: 50vw;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
Remove the margin-left: 100px line from your hover class. Also, try using transform for increasing image size. The code below will double the image size.
.imageOptionsList:hover img {
visibility: visible;
transform: scale(2);
}
You've got some conflicting information in your post. You mention the left offset as correct, then say it should at the end.
Below I removed the inline styles you had on the image and updated your selector to target img tags within .imageOptionsList. I've also added a transition so it doesn't do a hard snap, feel free to remove.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList img {
width: 25px;
height: 25px;
transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
width: 250px;
height: 325px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
Related
How can I change css width from 50% to 100 % when click the button see more detail here >>> Sample sandbox
<template>
<div id="theSpecial">Hello World Special</div>
<button #click="changeWidth">Change width</button>
</template>
<script>
export default {
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = true;
//change width to 100%
},
},
};
</script>
CSS
#theSpecial {
background-color: purple;
color: white;
width: 50%;
}
You have to make some change on your code
First of all add this to your css
.theSpecial{width:50%}
.fullWidth{width:100%}
To toggle the full width modify the method
changeWidth() {
this.testBoolean = !this.testBoolean;
//this will toggle the width on every click
},
and then use this in your component template
<div class="theSpecial" v-bind:class="{fullWidth:testBoolean}">
N.B. change the id into class, beacuse id has more css specifity.
This will toggle the class full width accordly to the value of testBoolean.
This is your Sandbox
Here you can find documentation about class binding
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="theSpecial" :class="{ 'full-width': testBoolean }">
Hello World Special
</div>
<button #click="changeWidth">Change width</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = true;
},
},
};
</script>
#theSpecial {
background-color: purple;
color: white;
width: 50%;
}
#theSpecial.full-width {
width: 100%;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = !this.testBoolean;
//change width to 100%
},
},
.theSpecial {
background-color: purple;
color: white;
width: 50%;
}
.fullwidth {
background-color: purple;
color: white;
width: 100%;
}
<div :class="(this.testBoolean === true)? 'fullwidth':'theSpecial'">Hello World Special</div>
<button #click="changeWidth">Change width</button>
I am using cytoscape.js to display a directed graph and I display 2 properties in a label.
I want to wrap the text and this is said to be possbile in the documentation but I cant get it to work. Can anyone help with the syntax?
'label': 'data(name)',
'font-size' : 14
'text-wrap': 'wrap/n'
text-wrap does not seem to work, it hangs up the graph display.
Do I need to set 'text-max-width'?
thanks in advance
You can't add the \n in the text-wrap css property, you are looking for the label property:
{
"selector": ".multiline-manual",
"style": {
"text-wrap": "wrap"
}
},
{
"selector": ".multiline-auto",
"style": {
"text-wrap": "wrap",
"text-max-width": 80
}
},
One of these classes should be added to the node you want your label to be wrapped. You can do it like this:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "wrap",
"text-max-width": 80
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I basically have two graphs and a sidebar.
Here's a fiddle demonstrating it:
https://jsfiddle.net/NibblyPig/b54qjavu/
Without min-width: 0 in the CSS the layout is badly broken with it stretching off the screen somehow even though that shouldn't be possible with a parent width of 100%.
Without calling the chart reflow method at the bottom of the javascript, the charts overflow off the screen.
Reflow kinda fixes it but despite both divs having flex-grow:1 they end up different sizes, again despite both having flex-grow: 1
If you resize the window itself, i.e. restore/maximise it the layout breaks even more, with the left div taking something like 20% of the width.
Any idea how I can fix this?
Pasted JS fiddle code below:
<div id='parent'>
<div id='columns'>
<div id='leftcolumn'>
<div id='chart1'>
</div>
<div id='chart2'>
</div>
</div>
<div id='rightcolumn'>
This is the right column.
</div>
</div>
</div>
CSS:
#parent {
display: flex;
width: 100%;
flex-direction: row;
height: 100vh;
min-width: 0;
}
#columns {
display: flex;
width: 100%;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
#leftcolumn {
display:flex;
flex-grow: 1;
flex-direction: row;
flex-shrink: 1;
min-width: 0;
}
#rightcolumn: {
flex-grow: 0;
display: flex;
width: 200px;
min-width: 0;
}
JS:
$(function () {
var myChart = Highcharts.chart('chart1', {
chart: {
type: 'bar'
},
title: {
text: 'Monthly Statistics'
},
xAxis: {
categories: ['ABC', 'DEF']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'This Month',
data: [4, 1]
}, {
name: 'Average',
data: [3, 2]
}]
});
var myChart2 = Highcharts.chart('chart2', {
chart: {
type: 'pie'
},
title: {
text: 'ABCDEF'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'AXD',
y: 67.34,
sliced: true,
selected: true
}, {
name: 'ERT',
y: 11.88
}, {
name: 'ASD',
y: 20.78
}]
}]
});
});
I've fixed this by applying flex-basis: 50% to the parent container and a call to resize upon first loading the page with window.setTimeout(function () { myChart.reflow(); myChart2.reflow(); });
Here is the updated fiddle:
https://jsfiddle.net/NibblyPig/b54qjavu/2/
I had done one quiz application, But i want to add some animations
like fadein/fade-out, when click the prev/next button. Can any one
help me do the same. something need to change the css something need to change the CSS something need to change the css something need to change the css?
* {}
body {}
.question {
width: 70%;
margin: 0 auto;
height: auto;
display: block;
background: #eeeeee;
}
.question h1 {
text-align: center;
padding-top: 30px;
color: #666666;
}
.question h2 {
width: 100%;
font-size: 22px;
color: #0c1e5c;
padding: 1% 3% 0% 3%;
}
.question ul:nth-child(odd) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.question ul:nth-child(even) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.button {
text-align: center;
margin: 1% 0;
}
.btn {
background: #8bf8a7;
padding: 5px;
}
<html ng-app="quiz">
<head>
<meta charset="utf-8">
<title>Basic Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="quizCtrl">
<div class="question">
<h1>QUIZ APPLICATION</h1>
<h2>{{questions.question}}</h2>
<ul ng-repeat="option in questions.options">
<li style="list-style:none">
<input type="{{buttonType}}">{{option.text}}</li>
</ul>
</div>
<div class="button">
<input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
<input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
</div>
</body>
<script>
var app = angular.module("quiz", [])
app.controller("quizCtrl", function($scope) {
$scope.data = [{
question: "1)Which of the following selector matches a element based on its id?",
type: "single",
options: [{
text: "The Id Selector"
},
{
text: "The Universal Selector"
},
{
text: "The Descendant Selector"
},
{
text: "The Class Selector"
}
]
},
{
question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
type: "multiple",
options: [{
text: "%"
},
{
text: "cm"
},
{
text: "percentage"
},
{
text: "ex"
}
]
},
{
question: "3)Which of the following property is used to set the background color of an element?",
type: "single",
options: [{
text: "background-color"
},
{
text: "background-image"
},
{
text: "background-repeat"
},
{
text: "background-position"
}
]
},
{
question: "4)Which of the following is a true about CSS style overriding?",
type: "multiple",
options: [{
text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
},
{
text: "Any rule defined in tags will override rules defined in any external style sheet file."
},
{
text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
}
]
}
];
$scope.index = 0;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = false;
$scope.isNext = true;
$scope.nextQuestion = function() {
if ($scope.index < 3) {
$scope.index = $scope.index + 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = true;
if ($scope.index == 3) {
$scope.isNext = false;
}
} else {
// disble next botton logic
$scope.isNext = false;
}
}
$scope.previousQuestion = function() {
if ($scope.index > 0) {
$scope.index = $scope.index - 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isNext = true;
if ($scope.index == 0) {
$scope.isPrevious = false;
}
} else {
// disble next botton logic
$scope.isPrevious = false;
}
}
});
</script>
</html>
Check out ng-animate, basically what it does is it adds classes that you can style accordingly on showing dom and on hiding dom, like this:
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
And to use that functionality you would have to use ng-repeat in your html, something like this:
<div ng-repeat="item in data" ng-if="index === $index">
//Your question html here
</div>
Where data and index are $scope.data and $scope.index.
That would be the angular way of doing things.
However I see that you are using the same div, only changing scope data, that would require you to set
transition: 1s all ease;
On the question class, and then to do something like this in javascript:
angular.element('.question').css('opacity', 0);
$timeout(function() {
// change question..
angular.element('.question').css('opacity', 1);
}, 1000);
When creating a fluid layout, where content can be dragged around and edited inside a table I ran into a problem.
After clicking on any of the <a></a> hyperlinks the cell content should be replaced by an editable input box.
This gets done, but the cell changes its size and wrecks the original layout.
The cell size should not change after click. It should be possible to achieve this by editing the CSS and adding Bootstrap classes.
var viewModel = function() {
var self = this;
self.gridItems = ko.observableArray(
[{
"rowItems": [{
"name": "Item 1"
}, {
"name": "Item 2"
}, {
"name": "Item 3"
}]
}, {
"rowItems": [{
"name": "Item 4"
}, {
"name": "Item 5"
}]
}]
);
self.selectedRowItem = ko.observable();
};
//connect items with observableArrays
ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).data("sortList", valueAccessor()); //attach meta-data
$(element).sortable({
update: function(event, ui) {
var item = ui.item.data("sortItem");
if (item) {
//identify parents
var originalParent = ui.item.data("parentList");
var newParent = ui.item.parent().data("sortList");
//figure out its new position
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
originalParent.remove(item);
newParent.splice(position, 0, item);
}
ui.item.remove();
}
},
connectWith: '.sortable-container'
});
}
};
//attach meta-data
ko.bindingHandlers.sortableItem = {
init: function(element, valueAccessor) {
var options = valueAccessor();
$(element).data("sortItem", options.item);
$(element).data("parentList", options.parentList);
}
};
//control visibility, give element focus, and select the contents (in order)
ko.bindingHandlers.visibleAndSelect = {
update: function(element, valueAccessor) {
ko.bindingHandlers.visible.update(element, valueAccessor);
if (valueAccessor()) {
setTimeout(function() {
$(element).focus().select();
}, 0); //new RowItems are not in DOM yet
}
}
}
ko.applyBindings(new viewModel());
//$(".sortable").sortable({});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
}
.sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
cursor: move;
}
.sortable li span {
position: absolute;
margin-left: -1.3em;
}
.sortable li.fixed {
cursor: default;
color: #959595;
opacity: 0.5;
}
.sortable-grid {
width: 100% !important;
}
.sortable-row {
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.sortable-item {
border: 1px solid black;
margin: 0 !important;
}
.sortable-item > a {
display: block;
margin: 0 !important;
}
.sortable-item input {
display: block;
margin: 0 !important;
}
.sortable-container {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="sortable sortable-grid" data-bind="template: { name: 'gridTmpl', foreach: gridItems, templateOptions: { parentList: gridItems} }, sortableList: gridItems">
</ul>
<script id="gridTmpl" type="text/html">
<li class="sortable-row">
<table style="width:100%">
<tbody>
<tr class="sortable sortable-container" data-bind="template: { name: 'rowTmpl', foreach: rowItems, templateOptions: { parentList: rowItems} }, sortableList: rowItems">
</tr>
</tbody>
</table>
</li>
</script>
<script id="rowTmpl" type="text/html">
<td class="sortable-item" data-bind="sortableItem: { item: $data, parentList: $data.parentList }">
<input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
</td>
</script>
On your table, set table-layout to fixed. Another improvement would be to make the inputs take up the entire space of the cell.
Here are the css changes to make:
.sortable-item input {
display: block;
margin: 0 !important;
width: 100%; /* Added this property */
}
/* Added this rule */
.sortable-row > table {
table-layout: fixed;
}