Web links filter gap

wishpacker

Hi,

I would like to put the search field in a flexbox in order to get a space between the buttons using gap.

But if I use .com-weblinks-category__filter {display: flex;} the search field and its buttons take up the entire width and the drop-down selection on the right slides down into my link list

This also happens in the mobile view if I don't change anything in the CSS:

How can I put .com-weblinks-category__filter into a Flexbox without the dropdown selection moving?

dominic

Hi wishpacker,
You can use the following CSS code:

@media (min-width: 790px) {
.com-weblinks-category__filter {
    display: inline-flex;
}
}

.com-weblinks-category__filter {
    gap: 10px;
    margin-bottom: 10px;
}
.com-weblinks-category__filter input[type="text"] {
    margin-bottom: 0;
} 

@media (max-width: 789px) {
.com-weblinks-category__pagination.btn-group.float-end {
    float: none !important;
}
}

@media (max-width: 532px) {
.com-weblinks-category__filter input[type="text"] {
   width: 100%;
}
}

wishpacker

Hello,

I have now extended my CSS as follows and it is almost as I imagined it! 🙂

.com-weblinks-category__filter {
    display: inline-flex;
    gap: 10px;
}

.com-weblinks-category__filter input[type="text"] {
    margin-bottom: 0px;
}

@media only screen and (max-width: 600px) {
  .com-weblinks-category__pagination {
    float: none !important;
    margin-top: 5px;
}
.com-weblinks-category__filter input[type="text"] {
   width: 100%;
}
}

I asked ChatGPT which devices your @media information is for: I think 790px is for laptops and desktop PCs and by specifying 532px you want to address smartphones. I don't understand why I should put information relating to a desktop PC in a @media, that's why I didn't do it. ChatGPT also suggested 600px for smartphones to me.

However, the search field in the mobile view is very short. How can I put the buttons under the search field for the mobile view? I think I need a mix of Flexbox and Grid for this, right? I would like to have the buttons next to each other in the 2nd row.

dominic

Hi wishpacker,
You can try the following CSS code:

@media only screen and (max-width: 600px) {
.com-weblinks-category__filter input[type="text"] {
    width: 100%;
    display: block;
    margin-bottom: 4px;
} 
.com-weblinks-category__filter {
    display: inline-block;
    width: 100%;
}
.com-weblinks-category__filter button.btn.btn-primary {
    margin-right: 6px;
}
.com-weblinks-category__pagination {
    float: none !important;
    margin-top: 5px;
    position: absolute;
    right: 0;
    top: 39px;
}
.com-weblinks-category__items {
    position: relative;
}

.com-weblinks-category__filter button.btn.btn-primary {
    margin-right: 6px;
    padding: 0 14px;
    height: 40px;
}
.com-weblinks-category__filter button.btn.btn-secondary {
    padding: 0 8px;
    height: 40px;
}
}

wishpacker

Hello,
many thanks for your help! I think I really like the following solution:

.com-weblinks-category__filter {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    gap: 5px;
}

.com-weblinks-category__filter input[type="text"] {
    margin-bottom: 0px;
}

@media only screen and (max-width: 600px) {
  .com-weblinks-category__filter {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    width: 100%;
 } 
.com-weblinks-category__filter input[type="text"] {
    grid-column-start: 1;
    grid-column-end: 3;
    width: 100%;
} 
  .com-weblinks-category__pagination {
    float: none !important;
    margin-top: 5px;
}
}