not too sure what could be wrong, the tooltip alignment is off for the horizontal form, however if I change the form-control's left and right's padding to 0, it works (align center), can anyone please help?
code:
<div class="col-sm-4 form-group">
<input id="lastNameAdd" name="lastName" data-bind="value: lastName" title="" data-role="validate" data-content="Last name is required." class="form-control" required="" placeholder="last name" data-original-title="last name" aria-describedby="popover270602">
<div class="popover auto fade top in" role="tooltip" id="popover270602" style="top: -74px; left: 400.688px; display: block;">
<div class="arrow" style="left: -323.806%;"></div>
<h3 class="popover-title">last name</h3>
<div class="popover-content">Last name is required.</div>
</div>
</div>
Related
I am trying to resize the input field with Bulma. However, the input field stretches out across the entire screen width. Instead, I would like to center the user input with a width of say a quarter screen width.
Whatever size I enter in a div class, doesn't do anything, ie
<div class="is-size-3" >
or,
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
Would appreciate any advice.
This is what I have:
Thanks
<template>
<section>
<form >
<div class="is-size-3" >
<div class="has-text-centered">
<h1 class="title is-3">User registration</h1>
<form class="box">
<div class="field">
<label class="label">Username</label>
<div class="control">
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
<!-- #keyup.enter="enterUser" -->
</div>
</div>
<button class="button is-primary" #click="enterUser">OK</button>
<p v-if="enteredTask.length > 10">input is too long.</p>
</form>
</div>
</div>
</form>
</section>
</template>
Use the column system of bulma: https://bulma.io/documentation/columns/basics/
You could do something like this:
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<div class="control">
<input class="input" type="text" />
</div>
</div>
</div>
</div>
I have an array of data which is retrieved from a REST API. The user should be able to manipulate the data. The problem is that when several rows are shown (i.e. data1 array's length is larger than 1), it is the same date in all the #ds input elements. The same goes for all the #de input elements. I have checked the data in the array called data1, and there is no duplicates of dates, so the problem lies within the html. Since the input element that does not use ngbDatepicker works fine, the problem is related to the ngbDatePicker somehow, but I don't know how to solve it.
<form class="form">
<div class="row ml-5 mr-5 mb-2" *ngFor="let dataRow of data1; let in=index;">
<div class="col-12 col-sm mb-2 mb-sm-0">
<input class="form-control form-control-sm" #inpValue value="{{dataRow.fldValue}}" />
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="Start Date" name="ds"
[(ngModel)]="data1[in].inputStartDate" ngbDatepicker #ds="ngbDatepicker"/>
<button class="input-group-addon" (click)="ds.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="End Date" name="de"
[(ngModel)]="data1[in].inputEndDate" ngbDatepicker #de="ngbDatepicker" />
<button class="input-group-addon" (click)="de.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<button class="btn btn-primary btn-block w-100" (click)="saveBtn(dataRow, inpValue.value, dataRow.fldRowID)">Save</button>
</div>
</div>
</form>
This image illustrate the problem:
Shows identical dates, even though the uppermost datarow contains the start-date 1900-01-01 and end-date 2018-02-11
How to remove the space between button and two inputs in form div #roleSearch ? (#inputCode + #btnOpenSearch + #inputDescription)
<div id="roleSearch" class="col-md-2 ">
<input id="inputCode" type="text" class="form-control int-number col-sm-1" />
</div>
<div class="col-md-1">
<!-- Open a popup to search the code -->
<a id="btnOpenSearch" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> </a>
</div>
<div class="col-md-9">
<input id="inputDescription" type="text" class="form-control col-md-9 " />
</div>
</div>
http://jsfiddle.net/computeiro/rfehs6bg/72/
what you want ? remove space only or all things (#inputCode + #btnOpenSearch + #inputDescription) gone into a single line.
i solve this plz saw this link
<div class="row">
<form>
<div class="col-md-12 form-group">
<label for="inputCnpj">Patner</label>
<div class="entity-search form-group row input-group" style="display: table" >
<div class="col-md-2 p0" style="display: table-cell">
<input type="text" class="form-control int-number" />
</div>
<div class="col-md-1 p0" style="display: table-cell; vertical-align: top;">
http://jsfiddle.net/amitmonsterme/1o0rhq1b/2/
<div class="container vertical-center" style="background: url('background.png')";>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">LOGIN</div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
<br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="text" class="form-control" placeholder="Password" />
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-sm" style="align-content: center">Submit</button>
</div>
<br />
<div class="panel-footer">Trademark</div>
</div>
</div>
</div>
this is my code i have written the entire code i dont know why stack
overflow is displaying like this....
please help me regarding this
IMAGE IS HERE
SKYRIM BACKGROUND
You can try change your first line to
<div class="container vertical-center" style="background: url('background.png'); background-repeat: repeat;">
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this is the code that works properly.
makes background image responsive as well.
found answer on stackoverflow only
I'm trying to implement input field with additional options similar to gmail search box. You can see it on the screenshots below.
When you click on a caret sign then additional form is shown up:
Currently, I'm struggling with making a nice looking form shown after clicking on the caret sign. Anyone knows how to achieve that with Bootstrap?
Here is a jsfiddle link:
https://jsfiddle.net/x1sfs9xb/1/
<div class="container">
<div class="row">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div><div class="row">
<div class="col-md-12">
<h1>Some content</h1>
</div>
</div>
</div>
You can achieve that by using a little CSS and JS:
CSS (your dropdown menu is relative to input-group-btn so you have to change position of that to static - now your dropdown menu is related to the input-group):
.input-group-btn {
position: static;
}
.dropdown-menu {
left: 0;
}
JS (get width of the input and assign it to your dropdown menu, also change it on browser resize):
var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
});
JSFIDDLE