I don't know if the css for buttons is coming straight from bootstrap and needs addressed there, or if it applies here, so I'll start here.

The css applied to buttons (.btn .btn-primary .btn-success etc) is creating a visual button box around a link, but does NOT create an actual clickable button. This creates a poor UX when a user hovers over the visual button and clicks, but nothing actually happens. From a UX standpoint, a button should be a button, not a link with a box around it.

Looking at the .btn class which is applied to a span that wraps an anchor, the padding is applied directly to the .btn class and this is not correct. To fix it, the anchor must first be declared as a block (display: block;), then the padding must be applied directly to the anchor (a)

For example:

.btn {
}

.btn a {
  display: block;
  padding: 15px 10px;
}

I can only assume the :hover psudo is incorrect as well, pointing to the span instead of the anchor? (didn't look that far)

Comments

philsward created an issue. See original summary.

philsward’s picture

philsward CreditAttribution: philsward commented

Additional digging made this comment non-relevant

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Active » Closed (cannot reproduce)

I don't even know what you're talking about.

In this code base, all "buttons" are either a <button> or a <a> element where the btn, btn-* classes are directly applied to the element.

If you're seeing something wrapping a link with a button, then it's doing it wrong and not coming from this project.

philsward’s picture

philsward CreditAttribution: philsward commented

In this code base, all "buttons" are either a <button> or a <a> element where the btn, btn-* classes are directly applied to the element.

That's where the problem lies. When overriding the styling in views through the GUI, it applies it to 'the element', which is the wrapper, not the actual field <a>, making the "button" not work as a clickable button. You're required to click directly on the link text.

It's six one way, half a dozen the other in terms of use case and how people apply styling to "the element", but the overall best practice solution in order for the <a> tag to be a button, is to always target the wrapper for the CSS class, not the end <a> element itself.

Since this is a "Drupal" best practice to wrap the final element and apply styling to the wrapper, shouldn't Bootstrap be aware of this and output all btn, btn-* css within a wrapper to stay in line with what the rest of Drupal is doing? Looking at a bone stock setup of Drupal, I can't find any links that have CSS applied directly to the anchor tag. All styling is applied to the wrapper.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

This is a base theme for front facing themes, not an admin theme. Use Seven or Adminimal to configure views. There are a half a dozen things that would have to be reconfigured just to get Views to work right out of the box, which is a job for https://www.drupal.org/project/bootstrap_admin and not really a priority.

philsward’s picture

philsward CreditAttribution: philsward commented

What?? This has nothing to do with it being an admin theme...

I now see why you don't comprehend the initial issue... I also now see there's no point in trying to get this, or any other future issues fixed.

Thanks for your time.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

I now see why you don't comprehend the initial issue...

You're quite right.

I didn't understand the initial issue.

It was vague, generic and didn't explain how or where you were getting a "link inside a .btn".

I misread your issue thinking you were talking about the general View UI which has been asked several times and not that hard to jump to that conclusion if you re-read (assuming, of course, you didn't already edit your comments).

---

What you are actually referring to is "applying .btn class to views row item breaks links".

First, that would have been a much better "issue title" to start with.

Clearly, you are trying to figure out a way to apply the class directly on the link itself rather than the view's row item.

This is actually a common "problem" and definitely not unique to this project (Bootstrap).

Simply put: views doesn't work well that way out of the box. What you get is predefined by existing templates and UI options.

There are actually a multitude of solutions that you could implement.

Another possible solution, but not sure if it will do exactly what you're asking for here is: https://www.drupal.org/project/views_bootstrap

I doubt, however, any "solution" will be easy to do via the UI (unless you want to go the route of rewriting a field into a custom link).

Regardless, this entire discussion/topic goes into site building/customization which is way outside the scope of this project per https://drupal-bootstrap.org/api/bootstrap/docs%21Contributing.md/group/...

Which brings me to:

I also now see there's no point in trying to get this, or any other future issues fixed.

No. This isn't an issue with this project. This project's responsibility is not to ensure that every contrib module (popular or not) works "out-of-the-box". It gets the basics for the Bootstrap <-> Drupal integration done on an API level (render arrays) with a few CSS overrides to fix many of core's assumptions.

If a module actually follows best practices and abstracts its render array elements and UI components, it would work rather well with this base theme (several do BTW).

Views (by itself), however, is definitely not one of them. It is why other contrib modules exist to try and "help" soften the programming blow required to get Views to work "right". There are hundreds of extension modules for Views. Many fall under the "unique use case" category, but it just depends on what kind of data is being provided (entities, fields, etc.) how it's being styled (row/style plugins/renderer).

---

So no, this is definitely your issue. This project gets many, many issues created every single day. The most of which could easily be solved if the individual took the time to do some simple searches (and variations of searches) or asked in appropriate venues like d.o forums or http://drupal.stackexchange.com.

I'm really not trying to be insensitive, however you open your issues like it's the end of the world and it's all this project's fault.

You insinuate my lack of caring without realizing that it is in direct proportion to the lack of information and research in the first place.

Now, I've taken more time explaining all this and given you several links on possible solutions and also the appropriate venue(s) for these types of general site building questions.

---

FWIW, you could have opened with a clearer issue with defined steps to reproduce.

I would have still closed it, but would have provided the same links to answer your question quickly.

All without the emotion and distain you probably have for me now.

C'est la vie.