Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need to change dropdown width through css3

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #203024
    pallavi1811
    Participant

    Hi

    I have a requirement here.

    I have a dropdown which has various products. say 5 products: pal, agg, lav, wal, ert

    My dropdown normal width is as below:

    .custom-select select {
    width: 310px;
    }

    Now on select of agg in the dropdown, my this dropdown should reduce to width:189px and another dropdown should fade-in.

    How can i do this using css3?

    Thanks in advance!

    #203028
    pallavi1811
    Participant

    Hi

    The live example would be little difficult for me to put here. since my code is too long. can you give me an idea of how can that functionality be achieved

    #203029
    Paulie_D
    Member

    The live example would be little difficult for me to put here. since my code is too long.

    We only need a brief demo of the dropdown, perhaps in Codepen.

    We don’t need the entire page.

    However, I suspect that the required functionality will require Javascript.

    #203032
    pallavi1811
    Participant

    Please see the code here:

    http://codepen.io/anon/pen/PqWVOd

    initially the second dropdown would be hidden.

    when i select the “Iphone” product from dropdown, the other dropdown should fade-in and the width of first dropdown should decrease from 310px to 189px.

    i need this fade-in part and width decreasing part to be done through css transformation or something. is it possible?

    #203033
    pallavi1811
    Participant
    #203076
    pallavi1811
    Participant

    i have done the jquery part. the only part which i am looking for is though css3 transformations(scale may be, i am not sure) decreasing the width of the dropdown. Is that possible?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.