Radio input és szöveg - nobreak

Radio input és szöveg - nobreak
2015-08-28T10:38:51+02:00
2015-09-09T16:26:02+02:00
2022-12-02T19:51:03+01:00
halucska
Sziasztok,

azt szeretném elérni, hogy a radio buttonok és a hozzájuk tartozó szöveg között semmi esetben se legyen sortörés. Már mindent kipróbáltam, ami működhetne is, de mivel a radio gombok formázva vannak, egyik megoldás sem volt ezzel kompatibilis, tehát a megjelenés elromlott, ha a sortörést sikerült is megakadályoznom. Tehát a különböző elemekre alkalmazott  white-space: nowrap és normal opciók a sortörést megakadályozták, de közben elromlott a funkcionalitás - nem lehetett kattintani a buttonokat.

Itt a kód, és csatolva a tesztelhető verzió is.

Itt megnézhető: http://patrika.hu/test/

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <meta name="robots" content="NOODP"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- Custom --> <link href="css/style.css" rel="stylesheet"> <style> .radio input { display: none; } .radio span.formatted { width: 20px; height: 20px; display: block; float: left; margin-right: 6px; background-image: url('../images/radio-bg-off.png'); background-position: center center; background-repeat: no-repeat; } .radio input:checked + span.formatted { background-image: url('../images/radio-bg-on.png'); background-position: center center; background-repeat: no-repeat; } </style> </head> <body> <section class="col-xs-12"> <form class="form-horizontal" role="form" name="search-form"> <div class="col-sm-12"> <div class="col-md-3 col-sm-6">Mit keres Ön:</div> <div class="col-md-3 col-sm-2"><label class="radio radio"><input type="radio" name="optradio">Egyik opció ez<span class="formatted"></span></label></div> <div class="col-md-3 col-sm-2"><label class="radio radio"><input type="radio" name="optradio">Másik opció meg ez<span class="formatted"></span></label></div> <div class="col-md-3 col-sm-2"><label class="radio radio"><input type="radio" name="optradio">Harmadik opció is van<span class="formatted"></span></label></div> </div> </form> </section> </body> </html>

Köszönöm a segítséget,
H.
Mutasd a teljes hozzászólást!
Csatolt állomány
CSS kiegészítve 2 sorral...

.col-sm-2{min-width:235px;float:left;} @media (max-width:1000px) { .col-sm-6{width:100%;clear:both;} }
Mutasd a teljes hozzászólást!

  • És így?
    <!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <meta name="robots" content="NOODP"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <style type="text/css> .radio{ display:inline-block; height:18px; line-height:18px; } .radio input { display: none; } .radio span.formatted { width: 18px; height: 18px; display: inline-block; float: left; margin-right: 6px; background-image: url('../images/radio-bg-off.png'); background-position: center center; background-repeat: no-repeat; } .radio input:checked + span.formatted { background-image: url('../images/radio-bg-on.png'); background-position: center center; background-repeat: no-repeat; } .col-sm-3 { font-Size:0.2vmin; font-Size:1.45vmax; height:30px; line-height:30px; } </style> </head> <body> <section class="col-xs-12"> <form class="form-horizontal" role="form" name="search-form"> <div class="col-sm-12"> <div class="col-md-3 col-sm-3" style="background-color:lightblue;"> Mit keres Ön: </div> <div class="col-md-3 col-sm-3" style="background-color:pink;"> <label class="radio radio"> <input name="optradio" type="radio">Egyik opció ez <span class="formatted"></span> </label> </div> <div class="col-md-3 col-sm-3" style="background-color:lightblue;"> <label class="radio radio"> <input name="optradio" type="radio">Másik opció meg ez <span class="formatted"></span> </label> </div> <div class="col-md-3 col-sm-3" style="background-color:pink;"> <label class="radio radio"> <input checked="checked" name="optradio" type="radio">Harmadik opció is van <span class="formatted"></span> </label> </div> </div> </form> </section> </body> </html>
    Mutasd a teljes hozzászólást!
  • A betű méretének csökkentése sajnos nem opció. Nagyon kötött a design terv.
    Mutasd a teljes hozzászólást!
  • Pedig akkor sortörés lesz és ahogy csökken az ablak mérete, egyre rondább lesz szerintem...
    Nézd meg például egy mobil-méret esetében...
    Esetleg el is rejtheted a "fölösleget", de az még "rondább"...
    Bár Te tudod mit is akarsz...
    Mutasd a teljes hozzászólást!
  • Kisebb felbontáson az opciók egymás alá rendeződnek, így nem lesz ronda.
    Mutasd a teljes hozzászólást!
  • Ha jól értem, akkor az a problémád, hogy az egyik breakpointnál úgy jelenik meg, hogy a radio gomb a szöveg alatt van. Ebben az esetben akkor valahogy így kellene csinálnod:
    XmrYbZBónuszként a képek helyett használhatnál CSS-t, 2015 van :) Ha nem ez a gond, akkor nem teljesen értem. a problémát.
    Mutasd a teljes hozzászólást!
  • Ha a kérdezőnek így szebb és célszerűbb, akkor legyen...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • jól érted, de a megoldásod sajnos nem működik - ha pl. kitörlöd a radio button szövegéből a szóközöket, és összenyomod az ablakot, akkor rögtön látszik hogy a radio button alá kerül a szöveg.

    A kép használatáért én kérek elnézést, jogos
    Mutasd a teljes hozzászólást!
  • Akkor "wantoo" megoldásából "kicsit másképp"...
    /* CSS */ .radio { width:100%; position:relative; } .radio .str{ width:80%; display:inline-block; position:absolute; left:22px; overflow:hidden; /*background-color:pink;*/ } .radio input[type="radio"] { display: none; } .radio input[type="radio"] + .formatted { /* Így nem kell a floattal szórakozni */ display: inline-block; width: 20px; height: 20px; float:left; /* Így a szöveghez képest középen lesz */ vertical-align: middle; /* Képek helyett CSS */ border: 1px solid #ccc; border-radius: 50%; } .radio input[type="radio"]:checked + .formatted:after { content: ''; display: block; width: 14px; height: 14px; margin: 2px 0 0 2px; background: red; border-radius: 50%; } <!-- HTML --> <div class="col-sm-12"> <div class="col-md-3 col-sm-6"> Mit keres Ön: </div> <div class="col-md-3 col-sm-2"> <label class="radio"> <input type="radio" name="optradio" /> <span class="formatted"></span> <span class="str"> Egyik opció ez </span> </label> </div> <div class="col-md-3 col-sm-2"> <label class="radio"> <input type="radio" name="optradio" /> <span class="formatted"></span> <span class="str"> Második opció meg ez </sapn> </label> </div> <div class="col-md-3 col-sm-2"> <label class="radio"> <input type="radio" name="optradio" /> <span class="formatted"></span> <span class="str"> Harmadikopcióisvan </span> </label> </div> </div>
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Egy másik megközelítés: demó 1, demó 2 (szóköz nélkül) + letöltés.

    Lényeg az, hogy nem a label-ben van a radio hanem előtte:
    <input type="radio" name="optradio" id="value1"><label for="value1">...</label>
    az input nem látható, a label-nek van egy bal paddingja ahova a background van igazítva.
    Mutasd a teljes hozzászólást!

  • demó 2 (szóköz nélkül)

    Ebben az tetszik, hogy nincs elrejtve ami nem fér el -> és így "még szebben" mutat több sorban a szöveg, mint kisebb fontmérettel egy sorban...
    Mutasd a teljes hozzászólást!
  • A span a szöveg előtt legyen és ne utána. Mivel a kezdő dizájnon is előtte van, de ahogy látom float:left van rajta, és a miatt tűnik úgy, mintha balra lenne igazítva. Ha előtte le, még ha törik is a szöveg, akkor is bal oldalt marad a raido ikon. Ha nem szeretnéd, ha a szöveg alá menne, akkor a szöveget is tedd span-be, és formázd meg. Margin - padding a barátod.
    Mutasd a teljes hozzászólást!
  • CSS kiegészítve 2 sorral...

    .col-sm-2{min-width:235px;float:left;} @media (max-width:1000px) { .col-sm-6{width:100%;clear:both;} }
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd