I'm trying to make a menu. I want text to the right of it but I still want the mobile to be 100% width. When it's on desktop, how do I make the column not wrap around the div? I could make this 100% height, but then on mobile it might not work.
jsfiddle.net/La909cq3
Notice that name goes to the right of the menu if you stretch the container to be desktop width.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-4">
<ul>
<li>
<a ui-sref="manage.newPerson"><b>Groups of People</b></a>
</li>
<li>
<a ui-sref="manage.newPerson"><b>Make a New Person</b></a>
</li>
<li>
<a ui-sref="manage.people"><b>Make a New Manager</b></a>
</li>
</ul>
</div>
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone Number</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I just put clear:both; on your div that wraps around the form. Once i did that your 'name' heading stop floating up to the right of your list of items.
https://jsfiddle.net/6beL3rn5/
It really only has to do with the fact that the menu and the form need to be in separate grid spaces. you have the menu wrapped in col-md-4 which will flowt ot to the left...but no grid class for the div around the form. Doing this will help that
Look at how I added an outer div with
<div class="row">
and the added the col-md-12 class to both the menu and the form divs.
http://jsfiddle.net/gbn4hnw1/
One solution is to put col-md-4 around the second div http://jsfiddle.net/La909cq3/1/
<div class="col-md-4">
Have you tried using word-wrap in CSS?
Try this, I find it works well for me.
word-wrap: break-word;
white-space:normal;
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Related
Trying to create a filter on a web page that utilizes Bootstrap's drop-down menu and places each filter in columns side-by-side, but instead it stacks them right now. The filter menu is created dynamically by looping through an array of items I want to create and each item is a new column I want to place on my menu. I was trying to utilize the grid layout (container > row > column) with the class row-cols-# on my row element but that does not work as I thought it would.
I can force my menu to be a certain width using the style property and make the columns position correctly, but then my menu is no longer sizing appropriately based on n columns.
I am utilizing d-flex, flex-row and flex-column to create my sidebar navigation and and I am wondering if that is causing some of the issues?
Here is a sample of webpage stripped-down to illustrate. Filter Menu Help
The main reason they're stacking is because you're using .col-auto while .row by default has flex-wrap: wrap;, so it will keep each column as small as possible and wrap them.
The second reason is that the dropdown-menu is positioned absolutely but relatively to the .dropdown wrapper. Because you positioned the wrapper on the right side of the page, the dropdown-menu won't grow in width as you would expect.
So:
Don't use auto columns but rather set a max-width on the dropdown-menu.
Remove the <div class="dropdown"></div> wrapper.
Here's an example how you could make your dropdown in Codeply using your layout.
On small screen sizes the columns will stack using <div class="row flex-column flex-sm-row">. Each filter column utilizes a list <ul><li>...</li></ul> to contain the check-boxes and for easy styling.
<form class="dropdown-menu p-2 mt-1 overflow-auto">
<div class="container-fluid">
<div class="row flex-column flex-sm-row">
<ul class="col list-unstyled">
<li>
<h6 class="dropdown-header">Dropdown header</h6>
<hr class="dropdown-divider">
</li>
<li>
<input class="form-check-input me-1" type="checkbox" value="" id="first">
<label class="form-check-label stretched-link" for="first">First checkbox</label>
</li>
<li>
<input class="form-check-input me-1" type="checkbox" value="" id="second">
<label class="form-check-label stretched-link" for="second">Second checkbox</label>
</li>
<li>
<input class="form-check-input me-1" type="checkbox" value="" id="third">
<label class="form-check-label stretched-link" for="third">Third checkbox</label>
</li>
</ul>
<ul class="col list-unstyled">
...
</ul>
</div>
<div class="d-flex justify-content-end gap-3">
<button type="reset" class="btn btn-sm btn-warning clear-filter">Clear Filter</button>
<button type="submit" class="btn btn-sm btn-danger">Submit</button>
</div>
</div>
</form>
To tell Flex when to start wrapping the columns, set a max-width on the dropdown-menu. For the example I set it to 75vw but it can by any width you want. You can use row-cols-* instead, but you will have to add a column number for every break point, like .row-cols-1 row-cols-sm-2 row-cols-md-4 whereas setting a max-width is just easier to maintain and looks better visually with how the columns will stretch.
For the stretched-link to work the parent must have position: relative; applied to it. And whitespace: nowrap; is used to keep each <label> in-line with the checkbox.
form {
max-width: 75vw;
max-height: 80vh;
}
.col li {
position: relative;
white-space: nowrap;
}
Lastly, to prevent the dropdown-menu from closing when interacting with it add data-bs-auto-close="outside" on the <button> toggler.
I have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Use label instead of span
Wrap both label and the input with another element.
Use .form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text.
Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets.
And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
i'm trying to force bootstrap to vertical align this col in desktop view. because it's overlaping otherwise
the mess now :
enter image description here
so the problem fix it self if i resize the windows until it reach the mobile view (it will automaticly vertical align the div.) but i want it to be like that in any windows size.
what i trying to :
enter image description here
here is the catch. i can only acsess the css on that particular div.
because it's dynamically generated. and i cant change the html part.
here is what the html looks like :
<ul class="subquestions-list questions-list checkbox-list list-unstyled">
<div class="row">
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ001" class="question-item answer-item checkbox-item">
<div class="checkbox">
<label for="answer736732X11537X92547SQ001" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ001" id="answer736732X11537X92547SQ001" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ001" id="java736732X11537X92547SQ001" value="">Grundlagen der Informatik</label>
</div>
</li>
</div>
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ002" class="question-item answer-item checkbox-item">
<div class="checkbox"><label for="answer736732X11537X92547SQ002" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ002" id="answer736732X11537X92547SQ002" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ002" id="java736732X11537X92547SQ002" value="">Theoretische Informatik</label></div>
</li>
</div>
</div>
</ul>
i can also acsess it with javascript using dom manipulation. but i dont think it helps that much.
please help me!
thanks!
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/
Here is the example of my problem jsfiddle
<form class="well form-inline">
<div class="input-append">
<input type="text" class="input-block-level"><span class="add-on"><i class="icon-search"></i></span>
</div>
</form>
A you can see search button gets out beyond the container. How can I resolve this without of setting fixed width?
Used to position
.input-append{position:relative;}
.input-block-level{position:relative;z-index:1;}
.add-on{position:absolute;right:0;top:0;z-index:2;}
Demo