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!
Related
this is my current HTML for display a form field with bulma.
<body>
<div id="root">
<nav class="navbar is-primary is-navbar-sticky">
</nav>
<section class="section">
<div class="container">
<form>
<div class="field">
<label class="label is-medium">
"Title"
<div class="control">
<input type="text" class="input is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
</label>
</div>
</form>
</div>
</section>
</div>
</body>
So far so good.
A problem is that the input will take full width on each breakpoint, it's too much for a desktop resolution.
How to make the input only takes full width for mobile breakpoint while it could take a certain width after the mobile breakpoint.
Is there a bulma way to do this? Rather than write my own css rule?
Your using bulma framework So assign grid system of bulma framework you can use class column in your input element and you can use how much column u you want to set width of input field
<div class="control">
<input type="text" class="input column-12 is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
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
I am designing a checkout form and really like how the Stripe checkout forms groups its inputs tightly together as seen here
I use bootstrap 3 and so far I have marked out the structure, but I havent been able to get the inputs and their borders to be aligned neatly like in the picture
My html
<div class="col-xs-12">
<div class="input-grouping">
<div class="top">
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
</div>
<div class="bottom-left">
<input type="text" class="form-control" name="checkoutExpiration" id="checkoutExpiration" placeholder="MM/YY">
</div>
<div class="bottom-right">
<input type="text" class="form-control" id="checkoutCVC" placeholder="CVC">
</div>
</div>
</div>
Any advice?
If I was looking to replicate your example exactly, I would suggest suppressing the default presentation of the input fields (by removing the borders and background) and then wrapping them in divs which you can style as you choose.
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/
I am doing jQuery Mobile, how to make the checkbox for "stay signed in" is same line with button login.
please refer my jsfiddle.net/mapsv3/sZdCu/
My goal is same interface with Google signin box like
Thank you for your help!
Using the grid/block classes from jquery mobile will allow you to inline your elements simply.
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-theme="d" id="loginButton" data-role="button" data-inline="true" data-mini="true" value="Login" href="booking.html" rel="external" >Login</a>
</div>
<div class="ui-block-b">
<input type="checkbox" name="checkbox-1" id="checkbox-1" data-mini="true">
<label for="checkbox-1">Stay Signed in</label>
</div>
</div>
You could also add
data-role="none" this will remove the styling on the checkbox. I had to build something similar and it was quite hard.