Aligning Apply button in Views Exposed Filter

Created on 3 January 2024, 11 months ago
Updated 12 August 2024, 3 months ago

In a large web browser, the layout of views exposed filters is currently like this, i.e. with the "Apply" button on a separate line:

I would like it to be as shown in the preview of the view, in the Claro theme:

I've tried playing with the CSS output, but I'm finding it difficult to align the "Apply" button with the bottom of the text boxes. I'm thinking a neater solution might be at the level of changing the template, perhaps using bootstrap functionality. Pointers to the best way of addressing this issue would be appreciated.

Steps to reproduce

Set up a view in with an exposed filter.

๐Ÿ’ฌ Support request
Status

RTBC

Version

3.0

Component

Code

Created by

๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom egfrith

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @egfrith
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    ravi kant โ†’ made their first commit to this issueโ€™s fork.

  • Status changed to Needs review 11 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    @egfrith

    The requirement can archive using style in your custom theme.
    But I have made changes in base theme and created MR.

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom egfrith

    Thank you for looking at this and producing the suggestion ravi. I've taken a look at the code. In Firefox, I'm not sure it worked - though I was having all sorts of problems with CSS being cached. I'm also wondering if the hard coding of the height of the Apply button via the margin-tope might be a bit fragile.

    I've looked again at the way views does the exposed filters. The code there uses flexes, and the SASS code below works OK in my subtheme:

    form--inline {
      display: flex;
      .form-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
      }
    }
    

    I'm not very expert on CSS and bootstrap, so I'm not sure if this is the optimal solution - I would defer to the experts!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    @egfrith
    Your style code is perfect for sub theme but base theme not using sass for form--inline style so i made changes directly in style file.

  • Status changed to Needs work 7 months ago
  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia VladimirAus Brisbane, Australia

    See @ravi kant suggestion and update the fix.
    Cheers

  • Status changed to Needs review 7 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    I have applied styles on SASS files.

  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia jannakha Brisbane!

    @ravi kant thanks for the patch - to speed up review:
    since you've already created a patch and setup the environment - can you please provide screenshots of before/after patch application from the browsers: safari/firefox/chrome/edge

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    @jannakha
    Resolved conflict and attaching screenshots of "before and after" apply changes.

  • Status changed to RTBC 3 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Hritick

    I have tested the Merge Request in #3 and tried to applied it as a patch but it throwed some errors. Following that, pulled the branch and then tested it and it is working as good and it solves the issue. Attaching screenshots for reference.
    Thanks and regards,

  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia jannakha Brisbane!

    @Hritick the patch couldn't be applied because the branch was really old.
    I have updated this fork to the latest 3.0.x - try to apply patch now?

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Hritick

    Hey @jannakha,
    Tried to reapply the patch but still it failed. Using curl for applying the patch.

    thanks and regards.

Production build 0.71.5 2024