- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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
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.
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?
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?