Skip to main content

Forums

This topic contains 7 replies, has 3 voices, and was last updated by  uxfed 1 week, 5 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #293348

    DmitryAi
    Participant

    Hi!

    I have a next HTML-code:

    SOME TEXT

    and CSS-code for this:

    .smi { height: 19.4%; }
    .border { float: left; height: 100%; }
    .bmid { width: 0;
    overflow: hidden;
    display: inline-block;
    background: url(‘/img/mid.png’) no-repeat center;
    background-size: 100% 100%; }
    .bmid_anim { animation-name: smMiddleOn;
    animation-timing-function: ease;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; }
    @keyframes smMiddleOn { 100% { width: auto; } }

    And of course it doesn’t work because “width: auto; ”
    But I have a several “smi” divs with different texts.
    How I can make dynamic middle div?

    #293350

    Paulie_D
    Moderator

    A Codepen.io demo would be useful here.

    #293381

    DmitryAi
    Participant

    #293385

    Paulie_D
    Moderator

    Use max-width instead as you cannot animate auto width

    #293386

    DmitryAi
    Participant

    Thanks a lot!

    Using max-width instead width solved the problem.

    Amazing :)

    #294200

    DmitryAi
    Participant

    Hi!

    I’ve got another problem.
    What’s goes wrong when I’m add a paddings left and right side?
    :(

    UPD:
    Ok. Now I knew that max-width doesn’t take padding left and right.
    But how it possible to fix?

    #294210

    DmitryAi
    Participant

    Ok.

    I’m add a wrap with “width: fit-content;”
    It’s work.

    Don’t know is it best way?

    #294254

    uxfed
    Participant

    fit-content isn’t supported in IE or Edge. If you need to transition to an automatic width, a JS solution may be best.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star