[Joomla 4] [PHP 8] [v. 2.5.1] CSS suggestion for a better display of com_tags

[ghazal]

When clicking on a tag, the resulting display is not very nice. Here is a styling suggestion to make it better. PS : I simply took cassiopeia styling css and adapted it to astroid, while assigning .com-tags-tags___xxx to each styling details to avoid confusion.

.com-tags-tags__filter > input{
        width: 55%;
}

.com-tags-tags__filter{
position: relative;
display: inline-flex;
vertical-align: middle;
}
.com-tags-tags__filter .filter-search-lbl{
       position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.com-tags-tags__filter.btn-group,
.com-tags-tags__filter.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.com-tags-tags__filter.btn-group > .btn,
.com-tags-tags__filter.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}

.com-tags-tags__filter.btn-group{margin-bottom: 1em;} 

  @media (max-width: 480px) {
      .com-tags__items #adminForm {width: 16rem;}
      .com-tags-tag__category {margin-top: 3rem !important;}
       .com-tags-tag__category li h3 a , .com-tags-tags__filter > input {font-size: calc(.6em + 1vw);}    
      .com-tags__items .float-end {float: left !important;}
  }

.com-tags__items .float-end {
float: right;
    position: relative;
display: inline-flex;
vertical-align: middle;
}
.com-tags__items .float-end label {
        position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
}
.com-tags__items select {
    word-wrap: normal;
    text-transform: none;    
    margin: 0;
font-family: inherit;
}

.com-tags__items .form-select {
    max-width: 100%;
cursor: pointer;
background: url(../images/select-bg.svg) no-repeat 100%/116rem; /* A Cassiopeia image found in /images/ of this template */

    background-color: rgba(0, 0, 0, 0);    
background-color: #eaedf0;
border: 1px solid #ced4da;

}

.com-tags__items .form-select {
display: block;
width: 100%;
padding: 0.5rem 3rem 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #22262a;
background-image: url(../images/select-bg.svg);
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 116rem;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.com-tags__items .form-select option{
    color: var(--dark);
background-color: #fff;
}
.com-tags-tag__category {margin-top: 1rem}

[Nishtha003]

Hi,

Thank you for the suggestion, will forward it to the development team and see what we can do about it.

Thanks, Nishtha

[ghazal]

Just happy if it helps.

[itxchandan]

@ghazal

Thanks for sharing the code. I fixed the styling and code push in the dev branch. Please check.

[ghazal]

Not exactly the outcome I wanted to achieve, but my proposal is maybe a little too specific and not enough generic. Anyway, happy that you took it into consideration. And people can always add it into a custom.css file

[itxchandan]

We have designed the tag page. Please have a look.

[ghazal]

It looks perfect now. Sorry for the delayed answer. I wanted to check with the stable version and your latest release.