Reduce default input box size in bulma - html

How can I shrink the size of input box ? By default, it's covering all available area which is really not looking good. I need to keep it of medium size and in the center.
Code :
<div class="field is-horizontal">
<label>Saving Account:</label>
<input class ="input is-primary">
</div>

Mixed it with column classes.
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<div class="field is-horizontal">
<label>Saving Account:</label>
<input class="input is-primary">
</div>
</div>
</div>
Bulma document.
See it in action.

Related

How to align input, select and input in a html form field using bulma

I am trying to achieve above on the webpage with this:
<div class="columns">
<div class="column">
<div class="field">
<div class="control"><input type="text" class="input">
</div>
</div>
</div>
<div class="column">
<div class="select">
<select>
<option>January</option>
</select>
</div>
</div>
<div class="column">
<div class="field">
<div class="control"><input type="text" class="input">
</div>
</div>
</div>
</div>
But am getting this:
Am using bulma columns and form controls. Can you please help me, I need to horizontally pack elements at various places if you have any other good way to achieve it please let me know.
When using columns in bulma, you should know that all columns will be of equal width. See here:
Each column will have an equal width, no matter the number of columns.
That is also the case in your case. The columns are equal in size. The content of the columns, however, is not equal. The input elements have width:100% whereas the select does not.
To fix it, simply add width:100% to the select and its .select container:
.select,
select{
width:100%;
}

Bootstrap input group line break formatting

Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.

CSS adjustment for timepicker ui bootstrap angularjs

i was trying to adjust the CSS for this timepicker. whats happens is that the arrows don't come exactly on top of the text boxes of hours and minutes respectively.
what i want is to hold them together no matter if its for mobile screen or for medium screens or desktop screens (responsive).
here is my html code:
<div class="row" ng-show="timer" >
<div class="col-xs-12" class="timing">
<div class="col-xs-12">
<label class="col-xs-2"></label>
<label class="col-xs-2 visible-xs"></label>
<b>24 Hrs format<b>
</div>
<div class="col-xs-12">
<label class="col-xs-1"></label>
<label class="col-xs-2 visible-xs"></label>
<form class="col-xs-3" name="myTime" id="myTime">
<uib-timepicker name="mytimee" ng-model="mytime" show-meridian="ismeridian" required></uib-timepicker>
</form>
</div>
<div class="st-head-row tdcl col-xs-12 visible-xs"></div>
</div>
image:
here is the ui bootstrap page: https://angular-ui.github.io/bootstrap/
the timepicker is from there
so i tried a lot of css but i did not manage to solve the problem. can someone help out with the css to keep them together??

When the width is changing with regards to window size, how do I align elements that in separate divs?

I have a search input and a result element. Both are in separate divs/containers but I need them to align when the window size changes. I'm pretty sure there's a better way to do it than with Javascript.
One window size: http://i.imgur.com/KSmKsFL.png
A smaller window: http://i.imgur.com/tSMQvdD.png
I'm using this: http://getuikit.com/docs/utility.html and I'm liking it but with regards to responsive design I'm clearly doing something wrong. Shouldn't be this hard to get two elements to align regardless of screen width. Any suggestions?
My HTML
<div class="header-section">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-h1" id="head1">Search</h1>
<h1 class="uk-h1" id="head2">Lab</h1>
</div>
</div>
<div class="input-section">
<div class ="uk-container uk-container-center uk-text-center">
<form id="search-form" class="uk-form">
<input id="search-input" type="text" placeholder="Bing Engine ">
<button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button>
</form>
</div>
</div>
<div class="results-section">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result-title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
</div>
It felt quite clean to me.
My CSS: http://pastebin.com/4kkpe8cq
Using CSS:
#media(min-width:800px) {
// your CSS for a small width
}

center input in bootstrap with input-prepend

<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).