Image-sequencer: 'Select A Module' Dropdown - css width property

[teisenhower]

The width of the dropdown containing the modules is set to a vw value in the css. This results in the dropdown growing and shrinking depending on the width of the browser window. Causing it to extend beyond where it should covering up the "Add Step" button.

I was able to fix this by removing the width: 24vw; from .selectize-input

This code lives in examples->selectize.default.css and the width value is on line 139
css .selectize-input { border: 1px solid #d0d0d0; padding: 10px 0px; display: inline-block; width: 24vw; overflow: hidden; position: relative; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
This exists within the Latest Stable Demo: https://sequencer.publiclab.org

This should be an easy first-timer issue.

Thanks!

[welcome[bot]]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[jywarren]

Oh, this is great! So, does the solution then scale to multiple widths?
this is indeed something I've been hoping we can fix. Thank you!

On Fri, Apr 26, 2019 at 10:54 AM welcome[bot] [e-mail]
wrote:

Thanks for opening your first issue here! Please follow the issue template
to help us help you 👍🎉😄
If you have screenshots to share demonstrating the issue, that's really
helpful! 📸 You can make a gif https://www.cockos.com/licecap/ too!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/1044#issuecomment-487086590,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J6VH2GNGZKBB7XQO7LPSMJRXANCNFSM4HIWJY4A
.

[teisenhower]

Of course! Happy to help out!

The simple solution of just removing that width property outlined above won't enable it to scale to different widths, it'll be locked to whatever other css is setting the width. However, we could absolutely implement another solution that allows the width to be dynamic while still containing it to fit within the box and not overlap the button. If that's what you're looking for.

Thanks!!

[teisenhower]

Hey!

Here is something I worked up if you did want multiple widths. This involves altering the CSS a little bit and also changing some of the Bootstrap column classes in the index. But this will allow the "Select A Module" dropdown and "Add Step" button to scale depending on the width of the browser window.

---

Full Browser

(large breakpoint)

Large Breakpoint

Medium Breakpoint

Small Breakpoint

XSmall Breakpoint

GIF Example

---

This would also eliminate this from happening on smaller screens. Where the "arrow" icon gets pushed into the text.

[harshkhandeparkar]

@teisenhower are you going to open a PR?

[harshkhandeparkar]

Btw, please don't change the lib file selectize.default.css directly. Instead, you can add a rule to demo.css and add the !important

[teisenhower]

Hey! I absolutely can if you'd like but I was also going to see if you guys wanted to make this a first timers only issue since it's not too difficult of a fix.

Thanks!

[harshkhandeparkar]

You can do that too!
Just open the file(single) you want to edit, in the broswer. Make the
changes. It will ask you the new branch name, just prepend first-timers-
to the branch name. E.g. first-timers-selectize-fix. A new FTO will be
created! Try it!

On Sun 28 Apr, 2019, 5:57 PM Terrence, [e-mail] wrote:

Hey! I can but I was also going to see if you guys wanted to make this a
first timers only issue.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/1044#issuecomment-487374530,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIJI5H2BJCYYV36ZBSRBBKLPSWJZ5ANCNFSM4HIWJY4A
.

[teisenhower]

Awesome! I'll be sure to do that as soon as I get home today. Thanks!

[harshkhandeparkar]

Great! Thanks a ton!

On Sun 28 Apr, 2019, 6:53 PM Terrence, [e-mail] wrote:

Awesome! I'll be sure to do that as soon as I get home today. Thanks!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/1044#issuecomment-487379141,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIJI5H33CHYAL6N4PWRETQTPSWQOJANCNFSM4HIWJY4A
.

[teisenhower]

@HarshKhandeparkar Do I need to edit the code in my fork or the main repo? I started doing it on the main repo and it wants me to make a PR. Is that what I should do?

[harshkhandeparkar]

Just don't open the PR, the issue will still be created

[harshkhandeparkar]

Make it on the main repo.

[teisenhower]

Sorry for the confusion, it is having me compare the changes between 2 branches, not create a new branch.

[harshkhandeparkar]

OK, sorry for the trouble:

1. Edit the file here https://github.com/publiclab/image-sequencer/edit/main/examples/demo.css
2. Commit names do not matter, only the branch name does
   
   See this at the very end of the page? See the create a new branch option, add first-timers-* in there(* being anything descriptive). Click on the commit changes or propose changes button.
3. If it redirects you to a create pull request page, just close the tab.

[teisenhower]

I do not have that at the bottom of my page. I just have a "propose file change" form. I don't have the option of creating a new branch. I was just looking into this, not sure why I am not seeing that option.

I am getting this alert at the top of that edit page, saying I don't have write access to

I apologize for the added hassle on this

[harshkhandeparkar]

One last thing, try editing the file a little bit?

[harshkhandeparkar]

Oh absolutely sorry for the trouble, I thought anybody could do that. Ok I will do that myself, could you please tell me what to change/add?

[teisenhower]

No worries!! I just wanted to make sure I was doing everything the way you guys need.

Here are the changes made to the demo.css file

starting at line 105

````css

add-step-btn{

/* margin-left needed to be removed in order to solve column width issue #1044/
/ margin-left: 10px; /
/ width added to solve the column width issue #1044*/
width: 100% !important;
}
````

added to end of file

````css
.selectize-input {
/* width added to solve the column width issue #1044/
/ cancels out the width:24vw in selectize.default.css - issue #1044*/
width: 100% !important;
}

````

Then there are some minor class changes to be made in the index.html file

These lines are 140-150

• We are adding justify-content-center to the row containing the dropdown and add step button
• Adding text-center class to the select group. This keeps all the elements inside the dropdown center justified.
• Then finally on the divs containing the dropdown and add step button we are changing the col classes. This is what allows their widths to change depending on the window size.

Proposed changes to index.html

````html

Add Step

````

Current index.html

````html

Add Step

````

[harshkhandeparkar]

Ok thanks a lot.

[teisenhower]

Not a problem! Happy to help the project and give someone else the opportunity to contribute.

[harshkhandeparkar]

Done #1049