I have a problem with DotVVM multiselect styling. Content of multiselect is overlayed by input and I dont know what cause this problem. When I use dropdown list which uses exactly the same css classes, there isn't any problem with this. You can see dropdown list structure in picture below
Here is my HTML structure
<div class="form-group">
<Label>
<dot:Literal Text="{{value: Article.Article_Sections}}" />
</Label>
<div class="input-group">
<bp:MultiSelect DataSource="{value: ArticleSectionsList}"
SelectedValues="{value: SelectedArticleSections}"
ItemTextBinding="{{value: Name}}"
ItemKeyBinding="{{value: Id}}"
class="form-control " />
</div>
</div>
<div class="form-group">
<Label>
<dot:Literal Text="{{value: DetailDTO.Name}}" />
</Label>
<div class="input-group" Validator.Value="{{value: DetailDTO.Name}}">
<dot:TextBox class="form-control" Text="{{value: DetailDTO.Name}}" />
</div>
</div>
CSS code here
.form-group {
position: relative;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.dotvvm-bp-multi-select .bp-popup {
display: none;
padding: 5px 2px;
position: fixed;
overflow: hidden;
border-collapse: collapse;
border: 1px solid #808080;
border-radius: 0;
background-color: #fff;
color: #1a1a1a;
font-weight: normal;
cursor: default;
margin-top: 1px;
z-index: 1001;
text-align: left;
}
//here is css for opened state
.dotvvm-bp-multi-select .bp-popup.bp-state-opened {
display: block;
z-index: 1001;
}
.dotvvm-bp-multi-select .bp-popup.bp-has-list > ul {
list-style: none;
overflow-x: hidden;
padding: 5px 2px;
max-height: 250px;
margin: 0;
}
Image is edited, I changed dropdown list to simple text input in my previous code structure to make it more readable, problem is still the same.
Image showing dropdown list component, which works fine
It's a bootstrap compatibility issue. The form-group with MultiSelect is not focusable and therefore has lower z-index than the other groups.
Related
i got quite simple thing to do, but i can't find way out for that.
let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).
I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.
hope you guys got what i mean. :P
Thank you!
EDIT
<div class="mainbox-form">
<form>
<div class="mainbox-input">
<input type="text" name="store-name" placeholder="Name"><br>
</div>
<div class="mainbox-input">
<input type="text" name="store-subdomain" placeholder="Subdomain">
<label name="store-subdomain">.label.here</label><br>
</div>
<div class="mainbox-input">
<input type="email" name="store-email" placeholder="Email"><br>
</div>
<div class="mainbox-input">
<input type="password" name="store-password" placeholder="Password"><br>
</div>
</form>
</div>
.mainbox-form
{
text-align: center;
max-width: 50%;
min-width: 350px;
margin: 0 auto 0 auto;
}
.mainbox-input label
{
font-weight: bold;
color: #606060;
}
.mainbox-input
{
max-height: 57px;
}
.mainbox-input input
{
background: #f3f3f3;
width: 80%;
border: none;
color: #606060;
margin: 3px auto 3px auto;
padding: 15px 40px;
font-size: 18px;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 59%;
}
.mainbox-input input:focus
{
outline: none;
}
.mainbox-input input:active
{
outline: none;
}
http://jsfiddle.net/twjw113w/
Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.
You need to add display: inline-block and width to the label and input element that you want on the same line.
.mainbox-input label
{
font-weight: bold;
color: #606060;
display:inline-block;
width:35%;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 40%;
display:inline-block;
}
Is this how you wanted it?
jsfiddle
Please remove the css property below:
.mainbox-input{
max-height: 57px;
}
Modify the css below:
.mainbox-input input[name=store-subdomain]{
max-width:100%;
}
.mainbox-input input{
width:auto;
display:table
}
.mainbox-input label{
display: table;
padding: 0px 40px;
}
Visit this url:
http://jsfiddle.net/sarowerj/e41653o4/
This question already has answers here:
How to customize <input type="file">?
(18 answers)
Closed 6 years ago.
I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find two other questions about this subject, but the answers there either involved JavaScript, or suggested Quirksmode's approach.
My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.
HTML:
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>
CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
This fiddle demonstrates how this approach is quite flawed. In Chrome, clicking the !! below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.
Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?
I'm posting this because (to my surprise) there was no other place I could find that recommended this.
There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling[1].
The label tag was made for the exact purpose of directing any click events on it to the child inputs[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>
I've used a fixed position to hide the input, to make it work even in ancient versions of Internet Explorer (emulated IE8- refused to work on a visibility:hidden or display:none file-input). I've tested in emulated IE7 and up, and it worked perfectly.
You can't use <button>s inside <label> tags unfortunately, so you'll have to define the styles for the buttons yourself. To me, this is the only downside to this approach.
If the for attribute is defined, its value is used to trigger the input with the same id as the for attribute on the <label>.
Please find below a way that works on all browsers. Basically I put the input on top the image.
I make it huge using font-size so the user is always clicking the upload button.
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}
<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
The best example is this one, No hiding, No jQuery, It's completely pure CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input type="file" class="custom-file-input">
This seems to take care of business pretty well. A fidde is here:
HTML
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->
CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}
Any easy way to cover ALL file inputs is to just style your input[type=button] and drop this in globally to turn file inputs into buttons:
$(document).ready(function() {
$("input[type=file]").each(function () {
var thisInput$ = $(this);
var newElement = $("<input type='button' value='Choose File' />");
newElement.click(function() {
thisInput$.click();
});
thisInput$.after(newElement);
thisInput$.hide();
});
});
Here's some sample button CSS that I got from http://cssdeck.com/labs/beautiful-flat-buttons:
input[type=button] {
position: relative;
vertical-align: top;
width: 100%;
height: 60px;
padding: 0;
font-size: 22px;
color:white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #454545;
border: 0;
border-bottom: 2px solid #2f2e2e;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2f2e2e;
box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
I just came across this problem and have written a solution for those of you who are using Angular. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.
the directive
angular.module('myCoolApp')
.directive('fileButton', function () {
return {
templateUrl: 'components/directives/fileButton/fileButton.html',
restrict: 'E',
link: function (scope, element, attributes) {
var container = angular.element('.file-upload-container');
var button = angular.element('.file-upload-button');
container.css({
position: 'relative',
overflow: 'hidden',
width: button.offsetWidth,
height: button.offsetHeight
})
}
};
});
a jade template if you are using jade
div(class="file-upload-container")
button(class="file-upload-button") +
input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
the same template in html if you are using html
<div class="file-upload-container">
<button class="file-upload-button"></button>
<input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" />
</div>
the css
.file-upload-button {
margin-top: 40px;
padding: 30px;
border: 1px solid black;
height: 100px;
width: 100px;
background: transparent;
font-size: 66px;
padding-top: 0px;
border-radius: 5px;
border: 2px solid rgb(255, 228, 0);
color: rgb(255, 228, 0);
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
It's also easy to style the label if you are working with Bootstrap and LESS:
label {
.btn();
.btn-primary();
> input[type="file"] {
display: none;
}
}
it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.
You can make use of outline and :focus, these are compatible with major browsers.
HTML
<input type="text" class="inp" />
<br>
<input type="text" class="inp" />
CSS
.inp{
border:solid 2px gray;
margin: 20px 5px;
outline:solid 10px silver;
}
.inp:focus{
outline:solid 10px red;
}
Preview on JSFiddle
You can do it like this :
input:focus
{
background-color:blue;//*
}
*this is just a example to change the background color.Do any thing that u desire here
Take look at complete example here.
You can wrap the input with an anchor tag, and set it to change background-color onfocus:
<a class='focused'><input /></a>
with CSS:
.focused:hover{
background-color:blue;
}
or, if you want it to change when the input is active, you need to use javascript/jQuery.
I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...
$(document).ready(function() {
$('input').on('focus', function() {
$(this).parent().css('background-color', 'blue');
});
});
I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.
http://jsfiddle.net/XSpwg/
HTML:
<div>
<form>
<input></input>
<input></input>
<input></input>
</form>
</div>
CSS:
div {
background-color: lightgrey;
width: 80%;
max-width: 400px;
overflow: hidden;
padding: 5px;
}
input {
margin: 2em 0.5em;
display: block;
border: solid 2px lightblue;
outline: none;
height: 16px;
line-height: 16px;
font-size: 12px;
}
input:focus {
box-shadow: 180px 227px 0 200px lightgrey,
180px 195px 0 200px blue;
}
Use pseudo-class selector for various effects.
There are two possible methods using CSS
Method 1 --> if you need both hover and on focus effect then use border styling for the <input> element
here is a typical HTML and CSS for method 1, --> Jsfiddle view
HTML
<form class="form-style">
<input class="input-style" type="text" name="some-name">
<input class="input-style" type="text" name="some-name">
</form>
CSS
.form-style
{
width: 250px;
margin:auto;
background-color: #d6d6d6;
display:block;
}
.input-style
{
width:200px;
margin:auto;
padding-left: 0px;
padding-right: 0px;
line-height: 2;
border-width: 20px 25px;
border-collapse: separate;
border-style: solid;
border-color: #d6d6d6;
display: block;
}
input.input-style:focus, input.input-style:hover
{
border-color: #3399FF;
}
Method 2 -> if you need just a hover effect then enclose the <input> element in a <div> and add :hover effect to it, or you can use the method 1 :hover and remove the :focus selector
here is a typical HTML and CSS for method 2, --> Jsfiddle view
HTML
<form class="form-style">
<div class="input-style">
<input type="text" name="some-name">
</div>
<div class="input-style">
<input type="text" name="some-name">
</div>
</form>
CSS
.form-style
{
width:250px;
margin:auto;
display:block;
}
.input-style
{
width: 200px;
background-color: #d6d6d6;
padding:20px 25px 20px 25px;
display: block;
}
.input-style input
{
width:inherit;
line-height: 2;
display: block;
}
.input-style:hover
{
background-color: #3399FF;
}
My advice -> just use on focus effect, because on hover will highlight the <input> on which the mouse is over even if you you are typing (on focus) in another <input>
How can I put default text in an HTML text input element which the user can't delete (fixed text at the start of the input).
The second thing what I want is that the cursor will be positioned after this fixed text.
Try this one. It might be helpful for you. It positions the text over the text input using absolute positioning.
.input-box {
position: relative;
}
input {
display: block;
border: 1px solid #d7d6d6;
background: #fff;
padding: 10px 10px 10px 20px;
width: 195px;
}
.unit {
position: absolute;
display: block;
left: 5px;
top: 10px;
z-index: 9;
}
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">£</span>
</div>
If you want to fix this with only an input element you can use an inline svg background.
http://codepen.io/anon/pen/pJoBya
To make this work in Internet Explorer you need encodeURIComponent the SVG image
http://pressbin.com/tools/urlencode_urldecode/
input {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
border: 1px solid #555;
box-sizing: border-box;
font: 16px "Arial";
height: 30px;
padding-left: 50px;
width: 300px;
}
<input type="text" />
I know this question is already answered, but here is another way to do it.
I tested this code with..
Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15
#text_container {
padding: 1px;
/*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
border: 1px solid activeborder;
/*Create our fake border :D*/
}
#text_container>label {
color: activeborder;
background-color: white;
-webkit-touch-callout: none;
/*Make the label text unselectable*/
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#text_container>input {
border: none;
/*We have our fake border already :D*/
}
<span id="text_container">
<!-- Don't break the following line to avoid any gaps between the label text and the input text -->
<label>http://www.</label><input type="text" />
</span>
var requiredText = 'https://';
$('#site').on('input', function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="site" />
You can also do it by using bootstrap :
div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
You can check here.(check the username field)
Absolutely position the text over the beginning of the field then add left padding to the field until the cursor lines up to the right position. See example here:
http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/
just use placeholder="Name"
for example:
I have a text box and a button, which is described with the HTML/CSS below.
Currently these two elements are appearing with the button slightly lower than the text box. Can somebody please suggest how I can get these two aligned so their middles are on the same horizontal axis? Thanks
update: apparently the outside world can't see this site. I'll post some HTML describing the controls shortly
update 2: This is the code:
<div id="SearchForm">
<form method="get" action="/search/Tabs">
<div class="search-box ActionControl">
<input type="text" value="" name="Search" id="Search">
Search
</div>
<div id="ContentArea"></div>
</form>
</div>
#SearchForm .search-box
{
padding: 25px;
height: 25px;
background-color: #F6E9D8;
border: 1px solid #E7DFD0;
}
#SearchForm .search-box input
{
width: 425px;
}
#SearchForm .search-box a
{
background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:White;
cursor:pointer;
font-size:8pt;
padding-left: 22px;
padding-right:22px;
padding-top: 3px;
padding-bottom: 3px;
}
This is a quick fix... it was only a pixel out to my eyes...
#SearchForm .search-box a
{
... (Your existing styles)
position: relative;
top: -0.1em;
}
Using vertical-align doesn't work for me, so this just shims it.
#search, .search-box a { vertical-align: middle; display: inline-block; }