Width of text box jQuery mobile - html

I have label and text box in jQuery mobile and i am trying to change the width of the text box.
For some reason after i am changing the width, lets say for 60% i am still seeing the rest of the 40% almost transparent.
I am adding also a photo of it in order to be more clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
#sales {
width: 60%;
}
How do i change the width without seeing the extra 40% of the text box?

When using jQuery mobile forms, the inputs are enclosed onto a div which holds the width as 100%. To change the width of your text field, you rather need to change its value of the parent, not from the input itself.
You can achieve this with jQuery:
$('#sales').parent().width($('#sales').parent().width() * .4);
The above code is setting the width of the parent div to 40% of its actual value. Here is an example fiddle: https://jsfiddle.net/qctddeza/
.width() function reference
.parent() function reference
Edit:
You would be able to do it with CSS only, but not selecting with an id, as you cannot get the parent of the input element. A general styling can be seen here.
Code taken from W3Schools.

Related

How to fix the buttons on bottom and scroll the remaining content

I am trying to show the content (inside ScroolView) on the Popup (Devextreme Popup) and there are buttons on the bottom of the Popup. The problem when the content getting bigger, buttons disappear on the popup. It means ScrollView (Devextreme ScrollView) doesn't work as expected. I have to fix the buttons of the popup and ScrollView (the content inside it) should use the remaining part of the popup.
I don't want to set a specific height for ScrollView because I want to make it responsive.
I make a simple demo that shows the problem.
http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview
How can i achieve this?
ps: I am using the Angular 2.x framework
And this is the source of the sample
<dx-popup #searchPopup maxWidth="40%" height="90%" class="popup" [showTitle]="true" [dragEnabled]="true" title="Test Pop" [visible]="true"> <div *dxTemplate="let data of 'content'">
<form id="searchForm" #f (ngSubmit)="do()" class="form-horizontal" >
<dx-scroll-view [showScrollbar]="Always">
<!-- Dynamic content which is gonna getting bigger -->
</dx-scroll-view>
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<dx-button text="Button 1" type="normal" ></dx-button>
<dx-button id="button" text="Button 2" type="default" [useSubmitBehavior]="true"></dx-button>
</div>
</div>
</div>
</form> </div> </dx-popup>
You have to set the height to .dx-scrollable-native.dx-scrollable-native-generic class. Either static or dynamically its up to you. When you say responsive it will behave according to the device height. But for your popup you have to specify the height of your content container
//dx.common.css line number 991
.dx-scrollable-native.dx-scrollable-native-generic {
-ms-overflow-style: auto;
/* overflow: hidden; */
max-height: 400px;
overflow-y: scroll;
}
Update this css in dx.common.css line number 991. 400 is the approximate height if content exceeds the container scroll will be there and if content is less than 400 the auto height will work for you.
I have solved this issue. it is need to dock the form inside the popup content. To do this, set the 100% height to the form. Then, you need to decrease the scroll view height by the height of your buttons. So, the scroll view height should be 100% - 36 pixels.
See the updated plunk.
this is the updated parts.
form tag:
<form id="searchForm" #f (ngSubmit)="search()" class="form-horizontal" style="height: 100%;">
scroll-view tag:
<dx-scroll-view [showScrollbar]="'always'" style="height: calc(100% - 36px);">

How do I restrict control width when using Twitter Bootstrap in standard form layout mode?

I am using Twitter Bootstrap in the "default" form mode http://getbootstrap.com/css/#forms where the form labels are above the form controls.
However as advertised the form controls are 100% width. I want to be able to control that width occastionally.
So for example in the above I want to have the id text area say 50%. I would normally apply the style col-md-6 to the text box but obviously this will not work in this case due to CSS inheritence.
So is the best approach here for me to create a new class as:
.force-md-6 { width: 50% !important; }
Or is there a better way?
The recommended way to do this is to use Bootstrap's grid. Form controls are styled to be 100% width of their container, so use a wrapping grid cell to affect the layout. Your form markup would look something like the following (seeing as you haven't posted an example to work with):
<form>
<label>Full width field</label>
<input class="form-control" name="full-width">
<div class="row">
<div class="col-xs-6">
<label>Half width field</label>
<input class="form-control" name="half-width-1">
</div>
<div class="col-xs-6">
<label>Half width field</label>
<input class="form-control" name="half-width-2">
</div>
</div>
</form>
You can use any of the grid classes. In the example above I've used col-xs-6 to create a 50% width column on all screen sizes.
If you want to display the label next to the input, take a look at Bootstrap's horizontal forms.

Add text to empty label in div without adding height to div

the problem is the following in have some inputs between css line separators, they are all alined vertically, and have labels beneath the inputs.
the problem is when there is a validation error , some text is put inside this labels, making them visible, this makes the div bigger and causes the container div to have bigger height therefore input is no longer aligned vertically.
is there a way so the label can already have height diferent from zero when there is no text?
Does this help?
jsfiddle : http://jsfiddle.net/thecbuilder/BKrHq/
Approach 1
in this solution, div containing label is given a fixed height according to font size.
html
<div>
<input type="text" id="txt" value="label content"/>
</div>
<div id="labDiv">
<label id="lab"></label>
</div>
<div>
<input type="button" value="Show Content in label" id="showLab" />
</div>
css
#labDiv{
height:18px;
}
Approach 2 in this approach, label is given text : a space character - to get it to the actual height , same as when it will contain the text.
js fiddle :
http://jsfiddle.net/thecbuilder/4Bazb/
html
<div>
<input type="text" id="txt" value="label content" />
</div>
<div>
<label id="lab"> </label>
</div>
<div>
<input type="button" value="Show Content in label" id="showLab" />
</div>
quick implementation of approach 2 :
if you have a common class for all such labels then you can use :before in css to add a space quickly.
if the class is : errorLabels
.errorLabels::before
{
content:"\00a0";
}
Just set a min-height for label div in css. It means that even if there is no tag the label is going to have some height but if text increases then label will adapt to the height of the text inside it.
#labelDiv{
min-height:14px;
}

Select box to fill remaining space

On my form I am trying to have my select box take up the row except enough room to show the button on the same row.
I am after a responsive design, so as I resize the page then of course with size of the select box should resize as well to take into account that size.
I can set a percentage on the select, but as it goes up and down sometimes I end up with a large gap, or the button goes onto a new line.
html
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label" for="droplist">Select item:</label>
<div class="col-xs-9">
<select id="droplist">
<option>Value 1</option>
<option>Value 2</option>
</select>
<button class="btn btn-primary">Action!</button>
</div>
</div>
</form>
css
select {
width: 80%;
}
Is there a way to have both the select and the button on the same line, and the select just resizes with the page?
fiddle; http://jsfiddle.net/sJT6C/
If you insist on the button having fixed width, you can use advanced CSS layouts (flex or grid, now experimental in Firefox) or alter the HTML markup and play with float CSS property as follows.
HTML:
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label" for="droplist">Select item:</label>
<div class="col-xs-9">
<button class="btn btn-primary">Action!</button>
<div class="wrapper">
<select id="droplist">
<option>Value 1</option>
<option>Value 2</option>
</select>
</div>
</div>
</div>
</form>
CSS:
.wrapper {
margin-right: 70px;
margin-top: .5ex;
}
select {
width: 100%;
}
button {
float: right;
}
JsFiddle
In the markup, I swapped the select and the button and wrapped the select in a div with class wrapper. The wrapper is needed to get the select to take as much space as possible, without specifying its width. (If width: 100% is specified without a wrapper, there will be no room for the button.)
The stylesheet tells select to stretch to the full width of its parent, which is .wrapper. The wrapper has no width specified, but as a block element it tries to take as much space as possible. Now we have a select that behaves like a well-behaved block element.
Now the floating part. The wrapper is given right margin of the size of button width (including padding and border). It would be best to ensure that the button never exceeds this size, but I did not focus on that. The button is told to float to the right. Thus it fills the space reserved by wrapper’s right margin. (If I did not swap the elements in markup, the button would move down by the height of the wrapper.)
And yeah, I forgot to mention the margin-top: .5ex of .wrapper. Originally select and button used to have their baselines aligned. My hack breaks this alignment and this margin is quite a poor attempt to fix it. Vertical alignment is a darn complicated thing in CSS and I did not find it important enough to really solve it here.
To add to Palec's answer, if you have a variable width for your button (or buttons), then margin-right will not be an adequate solution. Instead, replace with the overflow attribute:
CSS:
.wrapper {
overflow: hidden;
margin-top: .5ex;
}
select {
width: 100%;
}
button {
float: right;
}
(HTML unchanged from original answer)
JsFiddle
It is important that the button element is placed before the select box. It will not work the other way around (though I have not been able to determine why that is).
Note: this solution (like Palec's) will result in the tab index of the elements being reversed: the button will be tabbed to first, then the select box.

input text box width same as parent

How can I have a textbox that inherits the width of it's container?
For example I have a div that has a textbox inside it.
<div id='content' style='width:100%;'>
<input type='text' name='txtUsername'>
</div>
What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.
With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.
You should use box-sizing:border-box together with width:100%.
This way input will fit 100% of container's width but will not overflow it because of added input's padding:
#content input
{
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Live demo:
http://jsfiddle.net/745Mt/1/
More information about box-sizing CSS property with examples: http://css-tricks.com/box-sizing/
Just add style='width:100%;' (or how much % do you need) to the Input
<div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>
Have you tried setting the width of the input to 100%? e.g.
input {width:100%;}