diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx index d92aebcd9d..b17c70785b 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx @@ -17,6 +17,17 @@ export interface IVdkTextInputProps { label: string; } + +/** + * This function is used to be sure that placeholder text is not overflowing in case of long path + * if the string that is given is not path it will return the same string + * if it is a path it will return the last directory + */ +const getLastPartOfPath = (path: string): string => { + const pathParts = path.split(/(?=[/\\])/); // Lookahead assertion to keep delimiter + return pathParts[pathParts.length - 1]; +} + export default class VDKTextInput extends Component { /** * Returns a React component for rendering a div with input and value for VDK Option. @@ -43,7 +54,7 @@ export default class VDKTextInput extends Component { type="text" id={this.props.option} className="jp-vdk-input" - placeholder={this.props.value} + placeholder={getLastPartOfPath(this.props.value)} onChange={this.onInputChange} /> diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/vdkDialogs.css b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/vdkDialogs.css index e3fa3dd8a6..1d86c9c514 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/vdkDialogs.css +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/vdkDialogs.css @@ -13,14 +13,16 @@ display: none; } -.jp-vdk-checkbox-wrapper { +.jp-vdk-checkbox-wrappers { display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; + margin-left: 0; + padding-left: 0; } .jp-vdk-checkbox { - margin-left: 10px; + margin-right: 10px; } #enable {