1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Fix label for the first checkbox is down

Discussion in 'HTML & Website Design' started by mstdmstd, Apr 16, 2019.

  1. #1
    Hello,
    Why in this example https://jsfiddle.net/8fxLrgz5/2/
    label for the first checkbox is down of the checkbox and how to fix it ?
    SEMrush
     
    mstdmstd, Apr 16, 2019 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,759
    Likes Received:
    1,069
    Best Answers:
    21
    Trophy Points:
    400
    #2
    You need to fix the width between them. The label has no place to go but down.
     
    qwikad.com, Apr 16, 2019 IP
  3. mstdmstd

    mstdmstd Active Member

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #3
    Sorry, I did not undertstand your hint. please more details
     
    mstdmstd, Apr 17, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #4
    Wasn't a hint on his part. The (derp) col-3 rubbish from bootcrap style site-building methodology makes each of those sub-columns a fixed width. Those fixed widths are too wide for the label to fit next to your checkbox (well, garbage bloated faux-checks) so of course it breaks down. It's word-wrapping like any other content in HTML would as each of those columns HAS to remain 1/3rd width.

    You might want to back up a bit, kick the mentally enfeebled train wreck laundry list of how NOT to build websites that is bootcrap to the curb, and take the time to learn how to use HTML and CSS without that idiotic trash -- no matter how many mouth-breathers will blindly sing the praises of all things "bootstrap". You're only learning to write bloated, non-semantic, rubbish HTML... much less failing to learn the most basic concepts of what HTML and CSS are, why they are separate from each-other, or how to use either efficiently.

    I mean... endless pointless classes for nothing, presentational use of classes with static style in the markup to the point you might as well go back to using HTML 3.2, no names to be sent server-side. That's a mess.

    As evidenced by the junk markup you're stuck with there which has little if any business being anything more than:

    <fieldset class="describeWhatTheseAreNotWhatTheyLookLike">
    	<legend>Describe what they're choosing!</legend>
    	<!-- above legend could also be a appropriate depth heading -->
    	<div>
    		<input
    			type="checkbox"
    			id="cbx_facility_35"
    			name="nameSentToServer[]"
    			value="1"
    		>
    		<span></span>
    		<label for="cbx_facility_35">Washing Machines with What?</label>
    	</div><div>
    		<input
    			type="checkbox"
    			id="cbx_facility_35"
    			name="nameSentToServer[]"
    			value="2"
    		>
    		<span></span>
    		<label for="cbx_facility_34">Cars with long WHAT?</label>
    	</div><div>
    		<input
    			type="checkbox"
    			id="cbx_facility_32"
    			name="nameSentToServer[]
    			value="3"
    		>
    		<span></span>
    		<label for="cbx_facility_32">Products with long labels</label>
    	</div>
    </fieldset>
    Code (markup):
    Write your semantic markup with ZERO concern about what it's going to look like FIRST. Then apply any div/span for the hooking of style without saying what that style IS. Anything else, such as halfwitted dipshittery like "col-3" or "xm-s-4" or "text-centered' needs to be told to bugger off. As it's proof the people who created bootstrap are unqualified to even write a single line of HTML or CSS, much less be telling others how to do so!
     
    deathshadow, Apr 23, 2019 at 1:02 AM IP