How Adjust the Width of Search Bar Fields

[Mike]

I believe that the way the Tribe Event Bar generates the various search fields (Date, Search, Location) is through this code:

		<?php foreach ( $filters as $filter ) : ?>
						<div class="<?php echo esc_attr( $filter['name'] ) ?>-filter">
							<label class="label-<?php echo esc_attr( $filter['name'] ) ?>" for="<?php echo esc_attr( $filter['name'] ) ?>"></label>
							<?php echo $filter['html'] ?>
						</div>
					<?php endforeach; ?>

However, I want to manually adjust the width and display of each of these fields individually. In specific, I want a larger “Search” bar, a smaller “Date” Bar. Is there a way to separate these fields so that I can individually control the CSS layouts for them?

[Cliff]

Hi, Mike.

For reference, the code you shared is from https://github.com/moderntribe/the-events-calendar/blob/4.3.3/src/views/modules/bar.php#L54-L59

This file can be overridden via our Themer’s Guide, like if you wanted to customize how that foreach works.

You might prefer to simply change the widths via CSS.

Please let me know if this answers your question.

Thanks!

[Mike]

I can control the width via CSS, but right now it looks at each of the three input fields as the same field. I need to break them down individually, so that I can control their display as a single unit.

Current layout:

Desired Layout:

So instead of pulling the data via the foreach, I need the queries to pull each individually. I have tried using the existing snippets to rewrite the location and search field placeholders to accomplish this:

add_filter( 'tribe-events-bar-filters', 'tribe_support_1043886', 1, 1 );
 
function tribe_support_1043886( $filters ) {
 
    $value = '';
     
    if ( ! empty( $_REQUEST['tribe-bar-search'] ) ) {
        $value = esc_attr( $_REQUEST['tribe-bar-search'] );
    }
 
    $html = sprintf(
        '<input type="text" name="tribe-bar-search" class="tribe-bar-search" id="tribe-bar-search" value="%s" placeholder="%s">',
        esc_attr( $value ),
        'Event Name/Painting'
    );
 
    $filters['tribe-bar-search']['caption'] = 'Label text';
    $filters['tribe-bar-search']['html']    = $html;
 
    return $filters;
}

add_filter( 'tribe-events-bar-filters', 'tribe_support_1043887' );
  
function tribe_support_1043887( $filters ) {
  
    $value = '';
      
    if ( ! empty( $_REQUEST['tribe-bar-geoloc'] ) ) {
        $value = esc_attr( $_REQUEST['tribe-bar-geoloc'] );
    }
  
    $html = sprintf(
        '<input type="text" name="tribe-bar-geoloc" class="tribe-bar-geoloc" id="tribe-bar-geoloc" value="%s" placeholder="%s">',
        esc_attr( $value ),
        'Event Location'
    );
  
    $filters['tribe-bar-geoloc']['caption'] = 'Label text';
    $filters['tribe-bar-geoloc']['html']    = $html;
  
    return $filters;
}

I added in class=”tribe-bar-search” and class=”tribe-bar-geoloc” to both snippets, and then added in this custom CSS to my child-theme/tribe-events/custom-events-stylesheet.css file:

#tribe-bar-form input[type='text'] {
	background: #FFFFFF;
	border: none;
	border-bottom: 1px #b9b9b9;
	border-radius: 3px;
	box-shadow: none;
	font-weight: bold;
	height: 32px;
	line-height: 1;
	padding: 5px;
	width: 50%;
}

#tribe-bar-form .tribe-bar-search input[type='text'] {
	background: #FFFFFF;
	border: none;
	border-bottom: 1px #b9b9b9;
	border-radius: 3px;
	box-shadow: none;
	font-weight: bold;
	height: 32px;
	line-height: 1;
	padding: 5px;
	width: 150%;
}

#tribe-bar-form .tribe-bar-geoloc input[type='text'] {
	background: #FFFFFF;
	border: none;
	border-bottom: 1px #b9b9b9;
	border-radius: 3px;
	box-shadow: none;
	font-weight: bold;
	height: 32px;
	line-height: 1;
	padding: 5px;
	width: 100%;
}

Which SHOULD set the date field to a width of 50%, the search field to a width of 150%, and the location field to a width of 100%. Unfortunately, it is only picking up the width from the #tribe-bar-form input[type=’text’] CSS class, and is setting all three fields to the width listed there (in the above CSS, 50%).

Any ideas?

[Mike]

On a related note, what would be the modifications to use the placeholder replace script for the date field?

[Cliff]

Are you informed about CSS’ nth-of-type?

You could target the first as narrower and the second as wider, no?

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts