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

Any plans of adding sizing feature #70

Closed
assadnazar opened this issue Mar 22, 2020 · 1 comment
Closed

Any plans of adding sizing feature #70

assadnazar opened this issue Mar 22, 2020 · 1 comment

Comments

@assadnazar
Copy link

assadnazar commented Mar 22, 2020

I am using form-control-sm in all my forms but for files i am unable to set the size. Can you add this feature or guide me what i can do? I am using bootstrap.

Update:
I am using following styles to accomplish this. Hope it is the right approach for now.

<div class="form-group">
    <label for="facilityimage">Facility Image</label>
    <div class="input-group">
        <div class="custom-file custom-file-sm">
            <input type="file" id="facilityimage" name="facilityimage" class="custom-file-input" >                            
            <label class="custom-file-label" for="facilityimage">Facility Image</label>
        </div>
    </div>
</div>

and adding following css

.custom-file-sm, .custom-file-sm .custom-file-input, .custom-file-sm .custom-file-label
{
    height: calc(1.8125rem + 2px);
    font-size: 0.875rem;
}
.custom-file-sm .custom-file-input, .custom-file-sm .custom-file-label, .custom-file-sm .custom-file-label:after
{
    padding: 0.25rem 0.5rem;
}
.custom-file-sm .custom-file-label
{
    color: #939ba2;           /*  Just matching Placeholder Color   */
}
.custom-file-sm .custom-file-label:after
{
    height: 1.8125rem;
}
@Johann-S
Copy link
Owner

I @assadnazar,

bs-custom-file-input just add JavaScript to the Bootstrap component, if you have questions or need any help you'll want to ask around in the official Bootstrap Slack team or Stack Overflow. See their readme for more details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants