Setting A Single Tr In A Row To Colspan='100%' Causes The Other Rows ...

Trang chủ » Html Colspan Auto » Setting A Single Tr In A Row To Colspan='100%' Causes The Other Rows ...

Có thể bạn quan tâm

Progress® KendoReact Feedback Portal Create an account Log In Back to Feed Request a Feature Report a Bug Declined Follow Last Updated: 14 Jan 2019 06:31 by ADMIN Joe Created on: 10 Jan 2019 02:39 Category: KendoReact Type: Bug Report 0 Vote Setting a single tr in a row to colspan='100%' causes the other rows columns to have incorrect widths.

We are evaluating the React Grid component for our application and need to be able to have rows that span all columns. To do this, I have created a rowRender function that, for some rows, will render a single <td> element with the colspan set to 100%. The row renders fine, but the other rows, that have multiple <td> elements do not all render correctly. For my test application, they will render with a width of 8 pxs. On resize of a column, they will almost render correctly.

Here are some pictures of the issue in our test code.

https://drive.google.com/open?id=1bMwlUi7-7QiVHc6lubPiz45svHG1FSnS

I have created a sandbox that sort of reproduces the bug. https://codesandbox.io/s/w73v0x0mz8

If you select the "Show Full Row", the row with Id 999 will convert to a single <td> element with colspan='100%'. You will notice how after doing so, the last three columns collapse to a small number of pixels.

Thanks

Joe

Add a Comment Your Comment Attach files (Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif) Post Comment 3 comments Joe Posted on: 11 Jan 2019 15:43 Thanks for helping me out. I had a feeling I was causing the problem... ADMIN Stefan Posted on: 11 Jan 2019 07:13 Hello, Joe, Thank you for the example. The issue occurs because of the colSpan property accept only numbers and setting it to 100% breaks the rendering on the table: https://www.w3schools.com/tags/att_td_colspan.asp "Specifies the number of columns a cell should span." If the colSpan is set to the number of columns than the example is working as expected: https://codesandbox.io/s/n45z5y2r44 Regards, Stefan Progress Telerik Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items Joe Posted on: 10 Jan 2019 02:42 Correction, that should be a <td> element in the title, not a <tr> element. Create an account Log In View
  • Recently Updated
  • New Items
  • Most Popular
  • Status Info
Type
  • All
  • Bug Report
  • Feature Request
Status
  • All
  • Completed (211)
  • Declined (65)
  • Duplicated (14)
  • In Development (2)
  • Need More Info (2)
  • Planned (6)
  • Under Review (1)
  • Unplanned (554)
  • Won't Fix (13)
Category
  • All
  • KendoReact
  • ActionSheet
  • Agentic UI Generator
  • AI Coding Assistant
  • AIPrompt
  • Animation
  • AppBar
  • ArcGauge
  • AutoComplete
  • Avatar
  • Badge
  • Barcode
  • BottomNavigation
  • Breadcrumb
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Chart
  • Chart Wizard
  • Chat
  • Checkbox
  • Chip
  • ChipList
  • ChunkProgressBar
  • CircularGauge
  • ColorGradient
  • ColorPalette
  • ColorPicker
  • ComboBox
  • ContextMenu
  • Conversational UI
  • Data Grid
  • Data Query
  • Date Math
  • DateInput
  • DatePicker
  • DateRangePicker
  • DateTimePicker
  • Dialog
  • Drag & Drop
  • Drawer
  • Drawing
  • DropDownButton
  • DropDownList
  • DropDownTree
  • Editor
  • Error
  • Excel Export
  • ExpansionPanel
  • ExternalDropZone
  • File Saver
  • FileManager
  • Filter
  • FlatColorPicker
  • FloatingActionButton
  • FloatingLabel
  • FontIcon
  • Form
  • Gantt
  • Gauge
  • GridLayout
  • Hint
  • InlineAIPrompt
  • Input
  • Label
  • Licensing
  • LinearGauge
  • ListBox
  • ListView
  • Loader
  • Map
  • MaskedTextBox
  • Menu
  • MultiColumnComboBox
  • MultiSelect
  • MultiSelectTree
  • MultiViewCalendar
  • Notification
  • NumericTextBox
  • OrgChart
  • Page Templates / Building Blocks
  • Pager
  • PanelBar
  • PDF Processing
  • PDF Viewer
  • PivotGrid
  • Popover
  • Popup
  • ProgressBar
  • QR Code
  • RadialGauge
  • RadioButton
  • RadioGroup
  • RangeSlider
  • Rating
  • Ripple
  • Sankey
  • Scheduler
  • ScrollView
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Sparkline
  • SpeechToTextButton
  • SplitButton
  • Splitter
  • Spreadsheet
  • StackLayout
  • Stepper
  • StockChart
  • SVGIcon
  • Switch
  • TabStrip
  • TaskBoard
  • TextArea
  • TextBox
  • TileLayout
  • Timeline
  • TimePicker
  • Toolbar
  • Tooltip
  • TreeList
  • TreeView
  • Typography
  • Upload
  • VS Code Extension
  • Window

Từ khóa » Html Colspan Auto