I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
Related
I'm working on an ASP site for the company I work at. It's about adding money saving or earning activities to an overview that one of the directors can look at.
Currently though I have some styling issues, using bootstrap here.
I believe I used to have this issue once but how I solved it escapes me. I can't center all the elements and I can't make the input boxes connect with the addons on the right side as is seen in the picture.
<div class="container body-content" style="padding-top: 15px;">
<div class="container" align="center">
<div class="col-lg-8">
<div class="row">
<h2>Abstract</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">FYE</span>
<select class="form-control required" id="new-activity-fye-dropdown">
<option value="1">On Track</option>
<option value="2">Issue</option>
<option value="3">Behind</option>
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Activity Name</span>
<input type="text" class="form-control required" id="new-activity-modal-name-field"
aria-describedby="new-activity-modal-name-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The Name of the Activity. This name appears in the Activity Overview.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Responsible</span>
<input type="text" class="form-control required" id="new-activity-modal-responsible-field"
aria-describedby="new-activity-modal-responsible-field" disabled />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
<b>?</b>
</span>
</div>
<!-- TODO: Find an automatic way to make this dropdown -->
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Department</span>
<select class="form-control required" id="new-activity-modal-department-dropdown">
<!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() -->
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The department this activity belongs to.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Start Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-start" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The start of the activity. Usually today's date.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">End Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-end" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The estimated end of the activity.">
<b>?</b>
</span>
</div>
</div>
</div>
<div class="row">
<h2>Description</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Upload a thorough description explaining the Activity.</span>
</div>
</div>
</div>
<div class="row">
<h2>Estimation</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span>
<input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field"
aria-describedby="new-activity-modal-ax-account-numbers-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="AX Account number associated with the activity.
Multiple accounts can be added separated by commas.">
<b>?</b>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Upload the estimation calculations for the Activity.</span>
</div>
</div>
</div>
</div>
</div>
</div>
I feel that my HTML is fairly normal but I have a hard time applying styles from CSS files in ASP in the first place.
How would I make the addons on the right side connect with the input fields?
UPDATE
It appears that the problem was inside a default generated file called Site.css. It had the following in it:
input,
select,
textarea {
max-width: 280px;
}
Commenting that out solves the problem.
Since I don't know how exactly ASP's css structure is, here is how i would approach this situation:
use your browser's inspector to check exactly what type of css rule is making the "?" button be all the way to the right, i can only assume it either has a float, or the form has a huge margin on it's right.
once you have found the issue, you could use your browser's inspector further to test out some edits, if it's a margin thing, see how much margin it will actually need, if it's a float issue, see how it will look with float:none
as soon as you've found the solution to the issue, you will need to apply it, to do this add a custom .css file AFTER ASPs css files, this way whatever you write in it will overwrite any existing rules.
add the fixes to this new file and you should be done.
There must be something elsewhere on the page that is breaking the style of the select boxes, because when I view your snippet in codepen, in both Chrome and IE11, the select boxes do stretch to the question mark boxes at the right:
codepen.io/anon/pen/pgVoQg
btw, inline styles should usually be avoided where possible
I'm exploring the Materialize CSS library, and I'm having some issues with the waves effect class.
When added to a button it blurs the form it is in.
This is the form without the waves-effect:
After adding the waves-effect it gets blurry:
My html looks like this:
<div class="login-form centered">
<h1><i class="fa fa-user menu-icon"></i> Login</h1>
<form role="form">
<div class="form-group">
<input type="text"
class="form-control"
ng-model="alc.user.username"
id="username"
placeholder="Username"/>
</div>
<div class="form-group">
<input type="password"
class="form-control"
id="password"
ng-model="alc.user.password"
placeholder="Password"/>
</div>
<button type="submit"
class="waves-effect btn"
ng-click="alc.login(alc.user.username)">Sign in
</button>
<button type="submit"
class="waves-effect btn"
ng-click="alc.register()">Register
</button>
</form>
</div>
When checking the css attributes inherited from the class, I noticed that what's causing the blur is: will-change: opacity, transform;
After removing it the text returned to normal.
So my question is, why is this happening?
and how to apply the effect without the side effect?
Edit:
I've checked in chrome firefox and explorer, and the issue only occurs on chrome.
Hi I am not a good UI HTML developer but have to do some fixes on a form. I am surprised that text align is not working on this form. I can see this HTML but don't know how to align text right on label StockEnd.
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
This can be achieved with marginal adjustment to your HTML classes.
First, you must remove .col-sm-1 on your <label>, as this class causes a float:left to be applied to the element, which means any use of text-align will no longer affect it. With that class removed, you can then add .text-right to the parent of the <label>.
In the end, your HTML will look like:
<div class="col-sm-1 text-right">
<label class="control-label" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
Here's a Bootply to demonstrate.
Hope this helps! Let me know if you have any questions.
either add text-right class to the parent form-group
OR
modify the label to be display: block with text-right class to do this.
After discussing with my colleague, we made this change and it worked as required. Just removed the class from outer Div and it worked. So Instead of
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
it is now
<div >
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
Rest is same no change.
I am trying to get the Bootstrap datepicker working under a tab and it seems like some issues with it using with ng-required attribute. It is not updating the model value. Seems like a bug but not sure. If you take out ng-required attribute everything would work just fine.
Any help would be helpful.
plunker: http://plnkr.co/edit/NFcm0Bpu0y45LsrzVtpr?p=preview
$scope.data = {
opened: false,
record:
{
"Date of Birth": "2005-10-29T00:00:00"
}
<form name="mainForm" novalidate>
<div class="container" ng-form="subForm">
<tabset>
<tab>
<div class="row">
<div class="col-sm-3">
<div class="form-group" ng-class="{'has-error': subForm['test'].$invalid}">
<label class="control-label">Date of Birth</label>
<p class="input-group">
<input type="text" name="test" class="form-control" datepicker-popup="dd-MMM-yyyy" ng-model="data.record['Date of Birth']" is-open="data.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="false" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</form>
It is working with Angular 1.2.16. The problem is when using with Angualar 1.3.0. Logged an issue with Angualr-ui.
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}