Clarity Datagrid columns width - strange behaviorReplace specific expanded rows with detail in Clarity DatagridHow to get reference to clarity datagrid from typescriptproject clarity datagrid dynamic selectionConditional Clarity Datagrid Expandable RowsCustom string filtering in datagrid clarityClarity Datagrid Custom filter exampleDynamic sizing of angular/Clarity Datagrid Column Widths using Jquery - How to?Clarity Datagrid Default String Filter problemClarity Datagrid Headers of ColumnsClarity Design Datagrid how to change column width

Do I need a multiple entry visa for a trip UK -> Sweden -> UK?

Can somebody explain Brexit in a few child-proof sentences?

Personal Teleportation as a Weapon

Generic lambda vs generic function give different behaviour

Why did Kant, Hegel, and Adorno leave some words and phrases in the Greek alphabet?

Is there any reason not to eat food that's been dropped on the surface of the moon?

What is the oldest known work of fiction?

Time travel short story where a man arrives in the late 19th century in a time machine and then sends the machine back into the past

How do I keep an essay about "feeling flat" from feeling flat?

If you attempt to grapple an opponent that you are hidden from, do they roll at disadvantage?

What would be the benefits of having both a state and local currencies?

Is a roofing delivery truck likely to crack my driveway slab?

What's a natural way to say that someone works somewhere (for a job)?

Can a monster with multiattack use this ability if they are missing a limb?

What defines a dissertation?

Curses work by shouting - How to avoid collateral damage?

Is there a problem with hiding "forgot password" until it's needed?

Should my PhD thesis be submitted under my legal name?

Valid Badminton Score?

Trouble understanding overseas colleagues

Tiptoe or tiphoof? Adjusting words to better fit fantasy races

Implement the Thanos sorting algorithm

when is out of tune ok?

Teaching indefinite integrals that require special-casing



Clarity Datagrid columns width - strange behavior


Replace specific expanded rows with detail in Clarity DatagridHow to get reference to clarity datagrid from typescriptproject clarity datagrid dynamic selectionConditional Clarity Datagrid Expandable RowsCustom string filtering in datagrid clarityClarity Datagrid Custom filter exampleDynamic sizing of angular/Clarity Datagrid Column Widths using Jquery - How to?Clarity Datagrid Default String Filter problemClarity Datagrid Headers of ColumnsClarity Design Datagrid how to change column width













0















Edit: it appears percentage values aren't really loved by the table. Using pixels works fine.



Trying to set the Clarity Datagrid columns width, I'm observing a strange behavior.





The structure is as simple as possible



<clr-datagrid>
<clr-dg-column style="width: 15%;">LoL1</clr-dg-column>
<clr-dg-column style="width: 30%;">LoL2</clr-dg-column>
<clr-dg-column>LoL3</clr-dg-column>

<clr-dg-row>
<clr-dg-cell>LoL1</clr-dg-cell>
<clr-dg-cell>LoL2</clr-dg-cell>
<clr-dg-cell>LoL3</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>


Dependencies



"@clr/angular": "^1.1.0"
"@clr/icons": "^1.1.0"
"@clr/ui": "^1.1.0"


The project was set-up using Angular CLI.

Reproduces in StackBlitz.



I'n not a front-end developer usually, so I might have missed some details.










share|improve this question



















  • 1





    Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

    – Jeremy Wilken
    Mar 7 at 15:35






  • 1





    A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

    – hippeelee
    Mar 7 at 16:57











  • Thank you for the clarifications!

    – LppEdd
    Mar 7 at 16:58















0















Edit: it appears percentage values aren't really loved by the table. Using pixels works fine.



Trying to set the Clarity Datagrid columns width, I'm observing a strange behavior.





The structure is as simple as possible



<clr-datagrid>
<clr-dg-column style="width: 15%;">LoL1</clr-dg-column>
<clr-dg-column style="width: 30%;">LoL2</clr-dg-column>
<clr-dg-column>LoL3</clr-dg-column>

<clr-dg-row>
<clr-dg-cell>LoL1</clr-dg-cell>
<clr-dg-cell>LoL2</clr-dg-cell>
<clr-dg-cell>LoL3</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>


Dependencies



"@clr/angular": "^1.1.0"
"@clr/icons": "^1.1.0"
"@clr/ui": "^1.1.0"


The project was set-up using Angular CLI.

Reproduces in StackBlitz.



I'n not a front-end developer usually, so I might have missed some details.










share|improve this question



















  • 1





    Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

    – Jeremy Wilken
    Mar 7 at 15:35






  • 1





    A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

    – hippeelee
    Mar 7 at 16:57











  • Thank you for the clarifications!

    – LppEdd
    Mar 7 at 16:58













0












0








0








Edit: it appears percentage values aren't really loved by the table. Using pixels works fine.



Trying to set the Clarity Datagrid columns width, I'm observing a strange behavior.





The structure is as simple as possible



<clr-datagrid>
<clr-dg-column style="width: 15%;">LoL1</clr-dg-column>
<clr-dg-column style="width: 30%;">LoL2</clr-dg-column>
<clr-dg-column>LoL3</clr-dg-column>

<clr-dg-row>
<clr-dg-cell>LoL1</clr-dg-cell>
<clr-dg-cell>LoL2</clr-dg-cell>
<clr-dg-cell>LoL3</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>


Dependencies



"@clr/angular": "^1.1.0"
"@clr/icons": "^1.1.0"
"@clr/ui": "^1.1.0"


The project was set-up using Angular CLI.

Reproduces in StackBlitz.



I'n not a front-end developer usually, so I might have missed some details.










share|improve this question
















Edit: it appears percentage values aren't really loved by the table. Using pixels works fine.



Trying to set the Clarity Datagrid columns width, I'm observing a strange behavior.





The structure is as simple as possible



<clr-datagrid>
<clr-dg-column style="width: 15%;">LoL1</clr-dg-column>
<clr-dg-column style="width: 30%;">LoL2</clr-dg-column>
<clr-dg-column>LoL3</clr-dg-column>

<clr-dg-row>
<clr-dg-cell>LoL1</clr-dg-cell>
<clr-dg-cell>LoL2</clr-dg-cell>
<clr-dg-cell>LoL3</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>


Dependencies



"@clr/angular": "^1.1.0"
"@clr/icons": "^1.1.0"
"@clr/ui": "^1.1.0"


The project was set-up using Angular CLI.

Reproduces in StackBlitz.



I'n not a front-end developer usually, so I might have missed some details.







angular vmware-clarity






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 7 at 14:42







LppEdd

















asked Mar 7 at 11:38









LppEddLppEdd

8,65921647




8,65921647







  • 1





    Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

    – Jeremy Wilken
    Mar 7 at 15:35






  • 1





    A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

    – hippeelee
    Mar 7 at 16:57











  • Thank you for the clarifications!

    – LppEdd
    Mar 7 at 16:58












  • 1





    Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

    – Jeremy Wilken
    Mar 7 at 15:35






  • 1





    A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

    – hippeelee
    Mar 7 at 16:57











  • Thank you for the clarifications!

    – LppEdd
    Mar 7 at 16:58







1




1





Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

– Jeremy Wilken
Mar 7 at 15:35





Please see github.com/vmware/clarity/issues/2906 for details about this, but currently percentage widths don't calculate properly and you need to put in explicit values.

– Jeremy Wilken
Mar 7 at 15:35




1




1





A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

– hippeelee
Mar 7 at 16:57





A note about using percentages for column width. It uses flex box for layout and should naturally size the columns/cells to the content given unless the column is resized by the user. If that happens the column/cell width becomes fixed (but the others stay flexbox for layout purposes.

– hippeelee
Mar 7 at 16:57













Thank you for the clarifications!

– LppEdd
Mar 7 at 16:58





Thank you for the clarifications!

– LppEdd
Mar 7 at 16:58












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55042904%2fclarity-datagrid-columns-width-strange-behavior%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55042904%2fclarity-datagrid-columns-width-strange-behavior%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown