[Resolved] How to get two dropdowns with a specified width in the same line?

[Author]

Posts

[ABSTRACTUS]

I have an hour field and a minutes field, both dropdowns, and want users to select [hour] : [minute] in a CRED form.

What is happening is that I have a 100% width dropdown field, a ":" and another 100% dropdown field in a column.

When I set the dropdown fields to width:100px or so, they are not that broad but still break, they are not displayed on the same line.

how to achieve that the dropdowns appear in the same line?

btw I'm using KadenceWP, hence no bootstrap. for having two columns (opening time + closing time) i used

<div class="is-layout-flex wp-container-3 wp-block-columns">
<div class="is-layout-flow wp-block-column">
<div class="form-group">
left column content
</div></div>
<div class="is-layout-flow wp-block-column">
<div class="form-group">
right column content
</div></div></div>

[ABSTRACTUS]

Just to illustrate, this is a bit of an overkill of space used for hh:mm dropdowns 😉

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand you want to display two dropdowns in the same line - is that correct? If no, you can share screenshot of your desired output and send me problem URL where I can see the issue as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[ABSTRACTUS]

Hi Minesh
Thank you for your reply. What I want to achieve is like this sketch

[Minesh]

I got that but I will have to check what CSS is causing this issue. Can you please share problem URL where I can see the dropdowns and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Unfortunately - the admin access details you send to me is not working at this end. Can you please send me working admin access details.

I have set the next reply to private which means only you and I have access to it.

[ABSTRACTUS]

sorry I got distracted between sending you the information and saving the new user… now it should work

[Minesh]

Can you please check now: hidden link

I've activated the setting to load the Bootstrap 4 from Toolset from: Toolset => Settings => General => Bootstrap loading section:
=> hidden link

With the form you created I've disable the "Expert Mode" and adjust the fields as you required by drag and drop:
=> hidden link

[ABSTRACTUS]

A two column layout I already had before – without loading the bootstrap "just for this" …

So it's still the question, how do I get the dropdowns to a small size that makes real sense?
(to achieve what I sketched)

[Minesh]

Can you please check now: hidden link

I've adjusted the code as given under within your form editor:

<div class="row">
      
      <div class="col-lg-6">
      <label for="%%FORM_ID%%_opening-hour">[cred_i18n name='opening-hour-label']Opening Time[/cred_i18n]</label>
        <div class="row">
        		<div class="form-group col-sm-3">
					[cred_field field='opening-hour' force_type='field' class='form-control' output='bootstrap']
				</div>:
                <div class="form-group col-sm-3">
                    [cred_field field='opening-minute' force_type='field' class='form-control' output='bootstrap']
                </div>
        </div>
      </div>
		
      <div class="col-lg-6">
        <label for="%%FORM_ID%%_closing-hour">[cred_i18n name='closing-hour-label']Closing Time[/cred_i18n]</label>
         <div class="row">
        <div class="form-group col-sm-3">
				[cred_field field='closing-hour' force_type='field' class='form-control' output='bootstrap']
		</div>:
		<div class="form-group col-sm-3">
			[cred_field field='closing-minute' force_type='field' class='form-control' output='bootstrap']
		</div>
        </div>
      </div>
		
	</div>

You can remove unwanted fields from your form if required.

[ABSTRACTUS]

My issue is resolved now. Thank you!