Nieaktywny przycisk w button grupie, bootstrap.

Odpowiedz Nowy wątek
2018-12-07 21:23
0

Cześć wszystkim :)

Powoli uczę się wykorzystywania bootstrapowych rozwiązań. Mam potrzebę wyłączenia przycisku w pewnych warunkach i chcę go wyszarzyć poprzez parametr disabled.Użyłem rozwiązania wg zaleceń z getbootstrap: https://getbootstrap.com/docs[...]nents/buttons/#disabled-state Kod wygląda tak:

<div class="form-group">
    <div class="form-buttons btn-group-vertical">
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <span class="d-inline-block" data-toggle="tooltip" title="text tooltipa">
            <button class="btn btn-primary btn-sm" disabled>nieaktywny</button>
        </span>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1 długa naaaaazwaa</button>
    </div>
</div>

a efekt jest taki:
screenshot-20181207212102.png

Moje pytanie: w jaki sposób zmodyfikować albo jakich klas użyć aby nieaktywny przycisk dorównywał do szerokości pozostałych w grupie? Nie bardzo wiem czego szukać. Z góry dziękuję za wszelkie wskazówki i pozdrawiam.

Pozostało 580 znaków

2018-12-08 00:09
0

Tak na szybko spróbuj tak:

<div class="form-group">
    <div class="form-buttons btn-group-vertical">
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <span class="d-inline-block" data-toggle="tooltip" title="text tooltipa" style="width: 100%">
            <button class="btn btn-primary btn-sm" disabled>nieaktywny</button>
        </span>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1 długa naaaaazwaa</button>
    </div>
</div>

Pozostało 580 znaków

2018-12-08 00:13
0

Niestety bez zmian.

Pozostało 580 znaków

2018-12-08 00:17
1

działa na pewno sprawdzałem w edytorze na ver BT4.1
https://www.w3schools.com/code/tryit.asp?filename=FXYZ4ALSLGK9
kliknij na RUN


Pozostało 580 znaków

2018-12-08 00:33
0

Reczywiście, nawet jak zmieniłem wersję bootstrapa na moją (3.3.7) to działa. Mamy więc zagadkę czemu nie działa u mnie. Na dowód screen wraz ze źródłem: screenshot-20181208003803.png

edytowany 1x, ostatnio: dawid75_75, 2018-12-08 00:38

Pozostało 580 znaków

2018-12-08 11:06
0

Ehh, no cóż, do domu ci nie przyjadę i nie sprawdzę, więc chyba wychodzi na to, że musisz sam znaleźć rozwiązanie...


Pozostało 580 znaków

2018-12-08 11:32
0

Ciekawa sprawa. U mnie zadziałały dwie możliwości - pierwsza to przerzucenie width: 100% do buttona jeśli korzystam ze znacznika span lub wywalenie spana całkowicie i przeniesienie tooltipa bezpośrednio na nieaktywny przycisk.
screenshot-20181208113003.png

Na w3schools działa tylko opcja ostatnia, czyli wywalenie spana i umieszczenie tooltipa bezpośrednio na przycisku: https://www.w3schools.com/code/tryit.asp?filename=FXZIN57WDI48
Skąd się biorą takie rozbieżności? Zastanawia mnie to o tyle, że bootstrap w linku z pierwszego posta zalecał span, bo inaczej miało nie działać.

edytowany 1x, ostatnio: dawid75_75, 2018-12-08 11:34

Pozostało 580 znaków

2018-12-08 11:35
0

Nie wiem, może coś w css, span blokuje wartość width: 100% więc wywalenie pomaga, ale jest niezgodne z dokumentacją, tak czy siak to css, więc trzeba rzeźbić i sprawdzać w devtools, taka robota ;)


Pozostało 580 znaków

2018-12-08 11:42
0

Nigdy nie miałem serca do css :D No to skoro zostawienie spana jest zgodne z dokumentacją to rozum mi podpowiada, żeby zostawić tę wersję. Z drugiej strony wywalenie spana powoduje, że przycisk się nie wyłamuje od reszty grupy - chodzi mi o zaokrąglenie narożników: screenshot-20181208114142.png
Jak widać na obrazku w przypadku użycia spana w środku grupy przycisk ma zaokrąglone rogi, a nie powinien. Czy na to jest jakiś sposób żeby jednocześnie został ten span?

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0