Hello i have an html template with an input to select a range of price for posts filters.
This picture can help you identify the input :
I want to change the $ (with euro sign for example) but there is nothing in the html code, this is the code in the html :
<div class="col-md-6 pt-6 slider-range slider-range-secondary">
<label for="price-4-mobile" class="mb-4 text-white">Price Range</label>
<div data-slider="true" data-slider-options='{"min":0,"max":1000000,"values":[100000,700000],"type":"currency"}'></div>
<div class="text-center mt-2">
<input id="price-4-mobile" type="text" readonly class="border-0 amount text-center bg-transparent font-weight-500" name="price">
</div>
</div>
Do you have any ideas please?
I tried to change "type":"currency" but it gave me an error and the text is no longer showing up.
Related
I am trying to do a manual rendering of Django forms and it generates the code below, is there a way to get rid of the texts that do not have any HTML tags, a good example is the texts "Currently: " and "Change:" it is really difficult to style with CSS.
<div class="row align-center mb-0 text-center">
<div class="col-md-12">
<div class="fuzone mb-2">
<div class="fu-text">
<span><i class="mdi mdi-image-area"></i> Click here or drop files to upload</span>
</div>
Currently:
realtor/download.jpeg
<input type="checkbox" name="image-clear" id="image-clear_id">
<label for="image-clear_id">Clear</label><br>
Change:
<input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image">
</div>
</div>
You are safe to highlight 'Currently:' and 'Change:' and delete them without affecting your code. :)
On the other hand, if you'd like to style them, you can wrap them in divs and assign them css styling by referencing their class names.
Imagine divs like physical boxes that hold content. Very rarely should anything not be in a div.
Input type date and input type time are not showing their corresponding icons nor their default placeholders on mobile the input is simply blank, however, their pickers are working.
They all work on desktop and it shows if I select a mobile device on chrome developer tools.
my code:
<div class="col-12 col-md-4 offset-xl-2 col-xl-4">
<label for="insessiondate" class="col-md-12 col-form-label labelSpace2">Session Date*</label>
<input type="date" class="form-control" id="insessiondate" name="insessiondate" area-describedby="sessiondate" required="true">
</div>
<div class="col-12 col-md-4 col-xl-2">
<label for="insessiontime" class="col-md-12 col-form-label labelSpace2">Session Time*</label>
<input type="time" class="form-control" id="insessiontime" name="insessiontime" area-describedby="sessiontime" required="true">
</div>
As you can see I am using bootstrap if that might have something to do with the problem.
I have the below code snippet of a text box where one enters a mobile number. How do I have a pre-set value that a user can edit from?
For example:
The country code is already set and visible to the user, the user starts by entering their network provider number.
<div class="row">
<div class="col-md-6">
<div th:class="transfer-label"> Mobile Number
</div>
</div>
<div class="col-md-6">
<div class="form-group transfer-field">
<input th:id="msdn"
class="custom-input-normal rounded-input hollow-input-light"
type="text" name="msdn"/>
</div>
</div>
</div>
you can populate input tag with value using th:value attribute.
<input th:value="${variable}"> will render <input value="variablecontent">
I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.
I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
. I ended up getting something kind of close using
<div class="row">
<div class="input-group text-center">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/
Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.
Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
</div>
</div>
To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting
For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-xs-6">
#form input
</div>
<div class="col-xs-6">
#form input
</div>
</div>
</form>
</div>
</div>
</div>
That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms
If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting
I have bootstrap columns that has two labels and two inputs From and To, So From input is showing text correct but To input is not showing complete text when i load data dynamically.How can i fix this issue using bootstrap or I have to use css helper class to make it work.
when we use low resolution monitors problems occurs most of the time e.g 1366 x 768
main.html
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="issueFromDate" class="col-md-5">Issue Date
Range:</label>
<div class="col-md-7">
<div class="row">
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueFromDate"
name="issueFromDate" id="issueFromDate" disabled />
</div>
<div class="col-md-1">
<label class="control-label padd15"> To:</label>
</div>
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueToDate" name="issueToDate"
id="issueToDate" disabled />
</div>
</div>
</div>
</div>
</div>
I suggest you read more into the bootstrap grid system. You could use a mix of the different col- classes in order to make sure everything fits on the screen depending on the resolution. See this example:
Zoom and unzoom to see the grid system in action
Also, a date field always contains a maximum amount of characters. Therefore, you could set a min-width to the input