100% width sumoselect

[vinpkl]

Hi

Has anyone used custom select drop down plugin “SUMOSELECT”

SUMO SELECT

I am not able to set its width to 100%.

Its only accepting width values in pixels.

Thanks
Vineet

[RyanReese]

Got a code sample we can play with?

[molona]

@RyanReese

Got a code sample we can play with?

You’re supposed to be working but the only thing you want to do is play! This youth!

[RyanReese]

@molona

You’re supposed to be working but the only thing you want to do is play! This youth!

Psh - I go into work at 7AM. I sent that aroiund 5:50AM. I just woke up and tried coding for SPF before work.

That being said, now I’m at work, and yes I do wanna play .

[vinpkl]

Hi Ryan

You can download zip file from this link

SUMO SELECT

or from this DEMO PAGE

sumo select demo link

Thanks
Vineet

[RyanReese]

I am not allowed to download random links. Perhaps get a codepen demo up or an actual webpage?

If that “sumo select demo link” showcases the problem, which selects are you having trouble getting 100% width?

[vinpkl]

Hi Ryan

In the sumo demo page i want to use the basic dropdown without any extra options. Secondly i just created a codepen account. In the create “new code pen” there are 3 windows (HTML/ CSS/ JS) The javascript code which was supposed to be in the section, i inserted that in the JS window. There is another JS File called “Summoselect.js” Where would i upload that file in the code pen ?? I am not able to figure it. Thanks Vineet

[RyanReese]

@vinpkl

There is another JS File called “Summoselect.js” Where would i upload that file in the code pen ?? I am not able to figure it.

Is that file online somewhere? You can upload external resources.

[vinpkl]

Hi Ryan

I inserted all js in the JS Window.

Here is the link to codepen i created

Code pen page

In the CSS File, in the start i have given

.SlectBox { width: 100% !important; padding: 5px 8px;}

But If you see the result page , the input is not 100% width. Thanks Vineet

[RyanReese]

@vinpkl

the input is not 100% width.

[vinpkl]

Hi Ryan

I think the codepen was not fully save earlier.

Please check it again here

code pen saved again. Please click here again

Its not 100%

Thanks
Vineet

[RyanReese]

.SumoSelect needs width:100% on it. You have it set as an inline-block element which shrinkwraps and doesn’t extend the full width of hte page by default.

Or better yet - why even have display:inline-block on there?

[vinpkl]

Hi Ryan

I just changed the width from original 200px to 100%.

Rest all is the default that comes in the zip file package.

Do you want me change display property to block ??

Thanks
Vineet

[vinpkl]

Hi Ryan

I changed it to display block and it stretched to 100%.

Wow. It worked.

Thanks a lot

Vineet