Is it a style bug or how can I make placeholder to be consistent between input with k-textbox style and textbox with icon:
<input class="k-textbox" placeholder="lighter color and shadow on focus" />
<span class="k-textbox k-space-right">
<input placeholder="same color and no shadow on focus" />
<span class="k-icon k-i-search"></span>
</span>
Demo:
https://dojo.telerik.com/UmuwUYeJ
The placeholder color issue could be resolved by adding the k-input class to the nested element:
<input type="text" class="k-input" placeholder="placeholder..."/>
The box-shadow issue is more tricky, as when the nested element is focused, its parent box-shadow should be set. This can be achieved in two ways:
With JavaScript(Dojo example):
$(document).ready(function() {
$(".k-textbox input").focus(function() {
$(this).parent().css("box-shadow", "0 2px 2px 1px rgba(0,0,0,.06)");
});
$(".k-textbox input").focusout(function() {
$(this).parent().css("box-shadow", "none");
});
});
With CSS(Dojo example):
.k-textbox:focus-within {
box-shadow: 0 2px 2px 1px rgba(0,0,0,.06);
}
The above used focus-within select has limited browser support, thus take this into consideration in case you would like to use the CSS approach.
Related
I have form with a few text and drop-down fields. While text fields are working fine, the dropdown fields are not working as required :
The first option in the drop-down should be disabled but this isn't happening
I have used "required" for select, yet the form gets submitted without alerting. This works fine for text fields though
I feel this is probably something to do with the custom css I have added to change default Materialize theme colors but cannot debug further.
Here is the fiddle link : https://jsfiddle.net/2bxy0gf7/14/
Select HTML
<div class="input-field col col s6 m3 l2">
<select id="FQMreferring_doctor" required="" aria-required="true">
<option value="" selected disabled>Choose your option</option>
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
</select>
<label for="FQMreferring_doctor">Referring Doctor</label>
</div>
Custom CSS
.dropdown-content li > a,
.dropdown-content li > span {
color: #0067d0 !important;
}
/* label focus color */
.input-field input:focus + label {
color: #0067d0 !important;
}
/* label underline focus color */
.row .input-field input:focus {
border-bottom: 1px solid #00bcd4 !important;
box-shadow: 0 1px 0 0 #00bcd4 !important;
}
I have the following code that makes a horizontal range in Bootstrap:
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
I need to know how I can transform it in a vertical "range".
Try the code below and check if it solve your problem:
input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
<input type="range" orient="vertical" />
just a styling question for my Rails application.
I made some radio buttons to look like normal buttons. When a button is clicked (and the radio button is checked), I want to keep the button background-color the same as the hover color, but somehow it isn't working. Unfortunately, I'm not the biggest CSS expert.
The color red is just for testing purposes.
HTML:
<label class="btn custom-btn good-outline">
<%= f.radio_button :reception_feed, 2 %>
<%= image_tag "smiley_2.svg", size: '48x48' %>
</label>
CSS (first try):
.good-outline {
border-color: #00e676;
color: #00e676;
&:hover {
background-color: #00e676;
color: white;
}
input[type=radio]:checked + label {
background-color: red;
}
}
CSS (second try):
.good-outline {
border-color: #00e676;
color: #00e676;
&:hover {
background-color: #00e676;
color: white;
}
&:active, &:focus {
background-color: red;
}
}
If I assign the states in my browser, it's working. But it's not working with the click events.
Thanks in advance!
You can do it by changing your markup a little bit.
As I'm not familiar with Rails, I'll use basic HTML in my snippet.
First, why your first try fails.
Your HTML markup:
<label class="btn custom-btn good-outline">
<%= f.radio_button :reception_feed, 2 %>
<%= image_tag "smiley_2.svg", size: '48x48' %>
</label>
Your CSS:
.good-outline { // targets all elements with the class .good-outline (so your label)
border-color: #00e676;
color: #00e676;
&:hover { // targets .good-outline on hover (so your label:hover)
background-color: #00e676;
color: white;
}
input[type=radio]:checked + label {
// targets a label, next direct sibling to an input radio, all children of a .good-outline
// in your markup, it doesn't target anything
background-color: red;
}
}
In short input[type=radio]:checked + label won't target anything in your markup.
Now, let's change the markup:
<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>
See how the label is the next direct sibling to it's corresponding input ?
Thanks to that, you can almost keep your css (I've used plain css to be able to add the snippet):
label {
border-color: #00e676;
color: #00e676;
}
label:hover {
background-color: #00e676;
color: white;
}
input[type=radio]:checked + label {
background-color: red;
}
<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>
Now it's just a matter of styling to make it look like you want.
You could hide the input and keep just the label, you could add an image in the label and so on...
I have a render component which renders out some text and an image. The component is a DIV containing two divs. The first div contains an image, this div is floated to the right. The next div contains various text strings. I have overflow: hidden on the parent div, but my text is still wrapping around the div containing the image. The only way I can fix this currently is by setting the height to 100% for the div containing the image. However, if I do this I can't add a border / background to this div because it extends the entire page.
In short, I have a div containing two divs. I want my text in a column, and the image in the other. I do not want the text to wrap under the image. I've visited the other text wrapping questions, but overflow hidden or adding span tags doesn't seem to be solving my problem.
Below is the render function and the SASS/CSS that goes with it.
render() {
const renderHelpFile = this.props.data.filter(obj => {
return this.props.name === obj.name;
}).map((obj, idx) => {
return (
<div key={idx} className="fadingDiv">
<div className="divImg">
<img src={`${obj.image}`} className="helpFileImg"></img><br />
</div>
<div className="displayLineBreak">
<h3 style={upperStyle}> {obj.name} </h3>
<b>Path:</b> {obj.path} <br /><br />
{obj.content} <br /><br />
<b>Troubleshooting:</b> {obj.troubleshoot} <br /><br />
<b>Video:</b> {obj.video} <br />
</div>
</div>
);
});
css
.fadingDiv {
text-align: justify;
overflow:hidden;
-webkit-animation: divFadeIn .75s ease-in forwards;
animation: divFadeIn .75s ease-in forwards;
}
.displayLineBreak {
white-space: pre-line;
}
.divImg {
width: 35%;
float: right;
padding: 5px;
background: #0080ff;
border: 2px solid black;
border-radius: 2px;
//height: 100%;
}
.helpFileImg {
width: 100%;
height: auto;
}
That's how float is supposed to work - text "floats" around it.
Instead of using float, you could either define both containers as inline-block, with according widthsettings, or you could put display: flex on the container element.
If you know the width of the image, you can use that for a fixed width on the image container and use calc for the width of the text container, like width: calc( 100% - XXpx );, where XX stands for the width of the image.
I am displaying some list of ids as follows
<li>
<label> Nest</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select nest name." data-val-number="The field Nest ipId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestshipId" style="top: -69px; left: 202px; opacity: 0.8;">
</li>
The arrow of the ddl is working fine before showing the requirefield erorr msg.Once its shown, some part of it is shadowig over the ddl arrow.
so the arrow is not clickable through the erorr message
When I inspect the code through firebug, I could see the element like this
<li>
<label> Relation</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select relation." data-val- number="The field NestId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
<div class="formErrorContent">Please select relation.</div>
</div>
I think the arrow is not clickable because of the presence of field message over it.
Can anybody please help me to find a solution for this.
The message should be visible as well as the ddl arrow should work
You can also try setting the position of the error message to the left, in this case it will not be overlapping on the dropdown arrow.
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
position:relative;
left:20px;
}