0

I am having difficulty understanding the different column width attributes that are defined in classes, and a few other issues below.

  • If I have a form-horizontal with a form-group inside, and that form-group encapsulates a label, an input field, a button and a toggle switch all on the same line, how do I define it in my media query for mobile so that the label and input field stay on the same line and the button and toggle switch are wrapped on the same second line?

At the moment when viewed in mobile view the button and toggle switch seem like they float to the right sort of above the input field...I have tried defining form-inline, but I dont want any form-inlines in my form-horizontal, only form-groups...

  • I also have not specified sections in my long form, so instead I have individual div headers to signify each sections of the form, so does seem fine to do with a form?

  • I also am having a problem with my select dropdown lists. When I specify them to have width of 100% they dont span the width of their column width, the only way I can specify is to give them a fixed width, but then they dont become responsive....

Any ideas?

Thanks

<div class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
  <label for="fname" class="col-md-2 control-label custom-label">First name</label>
  <div class="col-md-8">
    <input type="text" class="form-control input-text" id="inputfname" placeholder="" focus>
        </div>
    </div>

<div class="form-group">
    <label for="lname" class="col-md-2 control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="">
    </div>
</div>

<div class="form-group">
  <label for="gender" class="col-md-2 control-label custom-label">Gender</label>
  <div class="col-md-2">
    <div class="toggle-input-btn-two">
      <div class="slider-two"></div>
        <span class="male">Male</span>
          <span class="female selected">Female</span>
      </div>
    </div>

    <div class="btn-group col-md-5"> 
        <a class="btn btn-default dropdown-toggle btn-select gender"
           data-toggle="dropdown" href="#">Other <span class="caret"></span>
        </a>
        <ul class="dropdown-menu inline">
            <li><a href="#">gender</a></li>
            <li><a href="#">gender</a></li>
            <!-- <li class="divider"></li>
            <li><a href="#">
            <span class="glyphicon glyphicon-star"></span> Other</a></li> -->
        </ul>
    </div>

    <div class="col-md-2">
        <div class="toggle-input-btn-three">
            <div class="slider-three"></div>
                <span class="private3">Private</span>
                <span class="public3 selected">Public</span>
            </div>
        </div>
    </div>

    <div class="headers">
        <h3>Next Section</h3>
    </div>

css

.form-horizontal .form-group{ padding: 0 15px;}
.form-horizontal .form-group .custom-label{ text-align: left; padding-left: 0; margin-top: -10px; font-size: 1.7em; font-weight: normal; color: #fff;}
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; padding: 0px 10px;  border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:focus { border-color: #f47929; }

/* DROPDOWN MENU STYLING */
.btn-group .btn-default { color: #fff; background-color: #4d4d4d; border: none; font-size: 1.2em; border-radius: 3px;}
.btn-group .dropdown-toggle {position: relative; overflow: hidden; padding-right: 24px /* Optional for caret */; text-align: left; text-overflow: ellipsis; }
.btn-group ul.dropdown-menu {width: 96%; margin-left: 15px; }

.btn-group .dropdown-toggle.gender {position:relative; width: 567px; margin-left: 10px; }
.btn-group .dropdown-toggle.account {position:relative; width: 780px; }

.btn-group ul.dropdown-menu.inline { width: 567px; margin-left: 25px;}

/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { position: absolute; right: 12px; top: calc(50% - 2px);}



 .toggle-input-btn-two {
    width: 200px; 
    height: 38px; 
    position: absolute; 
    display: inline-block; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
    color: #FFF; 
    background-color: #F47929; 
    border: 2px solid #FCD7BC;
    border-radius: 3px; 
    line-height: 34px; 
    font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; 
/*  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 */ cursor: pointer;
}

.toggle-input-btn-three {
    width: 200px; 
    height: 38px; 
    left: 60%;
    position: absolute; 
    display: inline-block; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
    color: #FFF; 
    background-color: #F47929; 
    border: 2px solid #FCD7BC;
    border-radius: 3px; 
    line-height: 34px; 
    font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; 
/*  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 */ cursor: pointer;
}

    .toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span
 { width: 50%; height: 100%; float: left; text-align: center; cursor: pointer; -webkit-user-select: none;}

.toggle-input-btn-two div,
.toggle-input-btn-three div { width: 100px; height: 80%; top: 50%; left: 2%; transform: translateY(-50%); position: absolute; background-color: #FFF; border-radius: 3px;}

.toggle-input-btn-three div { border: 2px solid #aaa;}
.toggle-input-btn-two div {border: 2px solid #b3b3b3;}
Krys
  • 819
  • 1
  • 21
  • 38
  • 1
    Hey Krystyna, can you please edit the post to include the markup and CSS you currently have? – TylerH Apr 01 '16 at 13:42
  • I suggest using `.form-group` for each field (` – hungerstar Apr 01 '16 at 14:10
  • Hmm, I'm not trying to invent the wheel, I am still learning bootstrap, so it may seem awful at the moment. I dont know what you mean about the gender, its a dropdown list, man – Krys Apr 01 '16 at 14:36
  • @hungerstar, I do have a form-group around the label and input – Krys Apr 01 '16 at 14:45
  • 1
    @Krystyna is this one of your first websites? I ask because you should be using form elements for forms and I don't see any of that in your markup. Elements like ``, ``, ` – hungerstar Apr 01 '16 at 14:47
  • @hungerstar Yes, its my first bootstrap website, so I def need help with it...I have edited my markup to include the inputs, sorry I left them out... Im just giving you small snippet of the form, because its too big.. – Krys Apr 01 '16 at 14:56
  • Here is [my interpretation](https://jsfiddle.net/6hn5hvdq/) of your markup and how I would create it with Bootstrap 3. It doesn't have your styles (the black and orange) and is just a guess at what you might be aiming for. Is the `Gender` field supposed to be three parts? – hungerstar Apr 01 '16 at 15:00
  • @hungerstar, well gender should have a toggle button an input and a another toggle button on the same line, but when you see it in responsive view, the elements dont clear each other vertically – Krys Apr 01 '16 at 15:11
  • Please define what a toggle button is to you. To me it could be a select, checkbox, radio or some custom elements. Which you use depends on how you wan to implement said "toggle." Does anything happen when the toggle buttons are in different states? Or are they independent? – hungerstar Apr 01 '16 at 15:23
  • @hungerstar the toggle is a custom made toggle because the bootstrap toggle switches did not work how I needed it to, so my toggle is using a main div another div inside as a toggle left/right and two spans that act as a pair of selections, and then jquery is used to do the toggling and selection...this is the question I asked on how to create toggle button http://stackoverflow.com/questions/36245245/possibly-better-way-to-code-this-hacky-toggle-button – Krys Apr 01 '16 at 15:24
  • Okay. How are you going to submit the value of your toggles? You'll likely need to update a hidden input. It take it you're looking to do something [like this](http://www.bootstrap-switch.org/)? Is there any reason the dropdown you have now cannot be a ` – hungerstar Apr 01 '16 at 15:49
  • @hungerstar the toggle does not work like bootstraps does, its custom thats why...i dont know how i am going to grab user input though :/ so your saying bootstraps select which i have will not work??? do you mean like this select: – Krys Apr 01 '16 at 16:21
  • @hungerstar the select you suggested is totally not what I have or how i need it to function...your confusing me – Krys Apr 01 '16 at 16:33
  • @Krystyna unfortunately you're the on that's causing confusion. Hence the lack of answers and comments. I ask multiple questions to help you out but I don't get responses for each question. Have you looked at any of the JSFiddle links (or any link) that I've provided in previous comments? You say you're using Bootstrap's select but the markup you've provided says otherwise. You're using a dropdown in place of a select which is used for navigation. If you're going to use a dropdown in place of an actual form element how do you plan to get that data to the server (same for toggles)? – hungerstar Apr 01 '16 at 16:53
  • I'm really trying to help here I really am. But there seems to be missing pieces, a loss in translation and what appears to be misconceptions about how to build forms, what to build them with and how the data is transported. – hungerstar Apr 01 '16 at 16:55
  • @hungerstar i didnt know the dropdown I had was strictly for navigation, I will have to change it then. for the toggle button, I am not sure how to get users input, I will have to ask more questions on that feed. The toggle you showed me on fiddle, is not the way i want it, its two separate toggles with a pair of selections, 'other' is suppose to be a select for gender other then male/female for now...I find there is so much information out there on bootstrap, its hard to define the right way...sorry for my lack of knowledge.. – Krys Apr 01 '16 at 17:35
  • @Krystyna in [this JSFiddle](https://jsfiddle.net/bdpq9cnk/) my toggles were just placeholders and are not complete by any means. But does seem to be what you're asking for: `toggle` `select` `toggle`. They may not be labeled correctly and definitely not fleshed out all the way. Did you see my link for [Bootstrap Toggle Buttons](http://www.bootstrap-switch.org/)? Maybe you can use that. Unfortunately I can't help any further as there's more than one issue at play here that needs to be solved and we can't go on like this in the comments forever. Hope you get it all squared away! – hungerstar Apr 01 '16 at 19:14

1 Answers1

0

Are you using Bootstrap 3? The documentation provides a nice illustration of the grid system: http://getbootstrap.com/css/#grid. To take advantage of bootstrap's grid, I'd wrap each set of elements that should stay together on "xs" in their own div with a class of .col-xs-12. Translated, "Hey, when you're in the "xs" world, take up the whole row." Then additionally, give it a class of .col-sm-6 so that once you hit 768px wide, each div will take up half the row.

dogwoodtree-dot-net
  • 276
  • 1
  • 3
  • 9
  • do you need rows as well inside the form-groups? do my form-groups seem to be fine and if I should encapsulate the div headers inside each of the form section too, or is it fine the way I did it? – Krys Apr 01 '16 at 14:39
  • In Bootstrap, it's best practice to wrap each row in a row div. (It'll probably work without it, but your left/right margins may get fiddly.) For your form, follow the design pattern provided on the documentation: http://getbootstrap.com/css/#forms – dogwoodtree-dot-net Apr 01 '16 at 15:31
  • @dogwood-dot-net Ok, so would it be fine to add row in my form-group class? – Krys Apr 01 '16 at 16:09
  • The "row" acts as a container for "I'm a group of 12-columns-across." If your intention is to have the div with the class "form-group" act as that container then stack the classes up; there's no problem with one element having several classes. I would recommend that the row container be only that - it separates layout from content and makes things a little easier to maintain. – dogwoodtree-dot-net Apr 01 '16 at 22:31
  • I have a row immediate after my container so thats fine. I thought I had to make every form-group a row, thats what I got from your previous suggestion – Krys Apr 02 '16 at 01:35