Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FileInput does not have stapled line in FastListTemplate #2248

Closed
MarcSkovMadsen opened this issue Apr 25, 2021 · 3 comments
Closed

FileInput does not have stapled line in FastListTemplate #2248

MarcSkovMadsen opened this issue Apr 25, 2021 · 3 comments
Assignees
Labels
type: bug Something isn't correct or isn't working
Milestone

Comments

@MarcSkovMadsen
Copy link
Collaborator

MarcSkovMadsen commented Apr 25, 2021

Panel: Current master branch after 0.11.3
Bokeh: 2.3.1

The FileInput used to look like below when using in the FastListTemplate.

image

But now it looks like below when I use the FileInput on the current master/ binder branch, i.e. the nice stapled line is missing.

image

import panel as pn

pn.config.sizing_mode = "stretch_width"

file_input = pn.widgets.FileInput()

pn.template.FastListTemplate(
    site="Panel",
    title="Download and Upload CSV File",
    main=[
        file_input,
    ],
).servable()
@MarcSkovMadsen MarcSkovMadsen added the type: bug Something isn't correct or isn't working label Apr 25, 2021
@MarcSkovMadsen MarcSkovMadsen added this to the v0.11.4 milestone Apr 25, 2021
@MarcSkovMadsen
Copy link
Collaborator Author

MarcSkovMadsen commented Apr 25, 2021

I can see that the fast_bokeh.css file needs to change from

input[type=file] {
    background: transparent;
    width: 100%;
    height: 100px;
    border: 3px dashed var(--neutral-outline-rest);
    border-radius: calc(var(--corner-radius) * 1px);
    text-align: center;
    margin: auto;
}
input[type=file][disabled]:hover {
  cursor: not-allowed;
  border-color: var(--neutral-outline-rest);
}
input[type=file]:hover {
  border-color: var(--neutral-outline-hover);
}

input[type=file]:active {
  border: 3px dashed var(--neutral-outline-active);
}

to

.bk-root input[type=file] {
    background: transparent;
    width: 100%;
    height: 100px;
    border: 3px dashed var(--neutral-outline-rest);
    border-radius: calc(var(--corner-radius) * 1px);
    text-align: center;
    margin: auto;
}
.bk-root input[type=file][disabled]:hover {
  cursor: not-allowed;
  border-color: var(--neutral-outline-rest);
}
.bk-root input[type=file]:hover {
  border-color: var(--neutral-outline-hover);
}

.bk-root input[type=file]:active {
  border: 3px dashed var(--neutral-outline-active);
}

image

@MarcSkovMadsen
Copy link
Collaborator Author

Fixed on binder branch.

@philippjfr philippjfr modified the milestones: v0.11.4, v0.12.0, v0.12.x Jun 25, 2021
@philippjfr philippjfr modified the milestones: v0.12.x, v0.13.0 Jan 3, 2022
@philippjfr philippjfr modified the milestones: v0.13.0, next Apr 1, 2022
@philippjfr
Copy link
Member

This indeed has been fixed for a while.

@philippjfr philippjfr modified the milestones: next, v1.0.0 Mar 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't correct or isn't working
Projects
None yet
Development

No branches or pull requests

2 participants