Baklava input, select etc. element problem. Not working BS modal about baklava

[erdemerciyas]

@muratcorlu full width work perfect. Thank you. We are waiting select elelment dropdown position ...

[erdemerciyas]

@muratcorlu i solved problem. Changed BS Modal (transform - translate)

[erdemerciyas]

Thank you very much. Best regards

[muratcorlu]

It's good you managed to fix it.

We'll also add a CSS variable to customize popover positioning soon. It may help for people who have to use transform: translate. I'll update here once it's added.

[AykutSarac]

+1 to this.

[muratcorlu]

This may be related with #341

I think there is a problem about positioning our popovers inside a fixed positioned area. @ozkersemih is working on popover component and will have a look if our new popover component will solve it.

Anyway we'll focus on this issue as soon as possible.

[muratcorlu]

We need full size input element. (width:100%) Sizes are restricted. Not working full width

Ah I just noticed there are 2 problems reported here. What is the issue about input width here? Can you give an example? @erdemerciyas

[erdemerciyas]

@muratcorlu

We need responsive input element. Current elements work with fixed width

[muratcorlu]

@erdemerciyas Input and select has default width but you can change them for your needs. I made an example: https://codepen.io/muratcorlu/pen/xxabNMN

They behave as same as the native <input> element. Native input also doesn't fill its container and has a default width but you are able to set its width as you want.

Please check and confirm if this covers your requirements.

[muratcorlu]

@erdemerciyas I couldn't reproduce the issue in dialog. Here an example bl-select select in an bl-dialog, and works fine. https://codepen.io/muratcorlu/pen/vYzOezY

Can you reproduce the issue in a playground?

[erdemerciyas]

@muratcorlu Select working perfect with Baklava modal. The same problem persists in our system.

Exp. https://codepen.io/erdem-erciyas/pen/poOJdxY

[muratcorlu]

Using transform: translate() in CSS changes the logic for fixed positioning. That causes this issue. I'll consider adding an option to use absolute positioning for select.

In the meantime, I would suggest to use Baklava Dialog since it uses native HTML Dialog element and has many advantages about a11y and consistency with other baklava components.

[erdemerciyas]

@muratcorlu I will talk to our teammates and give information about Baklava modal. Thank you very much

[github-actions]

🎉 This issue has been resolved in version 2.0.0-beta.81 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀