I've a Flask based application which has
Class itemform:
item2 = [("a", 'One'), ("b",'Two')]
items3 = SelectField(u'List items', choices=items2)
form similar to above which is rendered
return render_template('item.html', item3=item3)
on views.
item.html jinja2 template has below content
<form action="/items/" method="post" name="items">
{{ form.item3 }}
<input type="submit" name="submit" class="btn" value="done" />
</form>
the dropdown works properly, I can select the items and gather it
back it. The Problem is, the width of dropdown box is too small.
option name ("One") is barely visible and become visible only
when I click the dropdown arrow.
How to change width of it? Thanks for help!
EDIT:
Here's the link http://jsfiddle.net/SvN3F/
You mean height ? I've added height:auto at last line of css, visible on jsFiddle, it's default css who forced select to have height:18px.
input[type="text"], input[type="password"], textarea, select {
border: 1px solid #ccc;
border-radius: 3px;
color: gray;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
Related
I tried using the solutions found on stackoverflow to do this but it does not seem to work in newer versions of firefox. I want the red background to take up the entire button but this only works in the chrome, not firefox. I added the button::-moz-focus-inner css rules that should resolve this. Does anyone know how to do this in newer versions of firefox?
<style>
button {
padding: 0px;
}
label {
display: block;
padding: 1px 6px;
background-color: red;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
</style>
<button>
<label for="myId">My Button</label>
</button>
<br />
<button>My Button</button>
<input id="myId" type="checkbox" />
You've put a label into a button, and are applying the red background to the label, not the button. You'd be better off not using a label tag, but if you need to, put the button in the label tag.
<style>
button {
/* Padding is pretty important for buttons */
padding: 3px 5px;
border: 0;
background-color: red;
cursor: pointer;
margin: 0px;
}
</style>
<button>My Button</button>
<!-- It is good practice to put labels right before what they are labeling -->
<label for="myId"><button>My Button</button></label>
<input id="myId" type="checkbox" />
I may be wrong, and by all means im not trying to be rude. But it looks like you're pretty new to web dev. Look up any css property or tag you're having trouble with on W3Schools. It's a great website.
Cheers, Isaac.
I have a set of radio buttons, and everything works fine when onclick is used, but when onclick is replaced with onmousedown (or ontouchstart, tested in developer mode), checked+label works fine, but the alert requested in the HTML doesn't. The reason why I want to replace onclick (with ontouchstart) is to improve the performance of a hybrid app in IOS.
Any clue what my problem is... I've managed to get from zero coding to creating a quite complex physics app in 5 months without posting a single question anywhere, and I quite embarrassed by this one!
Here's the HTML:
<div class="switch-field1">
<input type="radio" id="sine1" name="switch_3" onclick = "alert('This works fine')" checked/>
<label for="sine1"> SINE </label><br>
<input type="radio" id="square1" name="switch_3" onmousedown = "alert('If I see this, problem solved')"/>
<label for="square1"> SQUARE </label><br>
<input type="radio" id="triangle1" name="switch_3" onclick = "alert('This works fine')"/>
<label for="triangle1"> TRIANGLE </label>
</div>
Here's the CSS:
.switch-field1 {
font-family: "sans-serif", Tahoma, Verdana, Lucida ;
padding: 0px;
overflow: hidden;}
.switch-title1 {
margin-bottom: 3px;
margin-left: 0px}
.switch-field1 input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden}
.switch-field1 label {
float: left;}
.switch-field1 label {
display: inline-block;
width: 100%;
background-color: #e6ffe6;
color: black;
font-size:11px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.2);}
.switch-field1 input:checked + label {
font-weight: bold;
font-size: 12px;
color: white;
background-color: #009900;}
The onmousedown event works, but only on the radio button, not on the label.
You should attach an event listener to the label itself, like:
<label for="square1" onmousedown="alert('If I see this, problem solved')">SQUARE</label>
Update:
The ontouchstart with function call worked for me, but you need to use it on touch capable 'device', I used the chrome device toolbar under dev tools (ctrl+shift+j, mobile icon at top left).
I used this function:
function whichbuttonID(){
// need js to select the option
document.getElementById("squarel").checked = true;
alert('Ok');
}
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
I have two buttons at the centre of my page with this css design.
button{
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
.button:hover {background-color: #3e8e41}
.button:active{
background-color: #3e8e41;
box-shadow:0 5px #666;
transform:translateY(4px);
}
#javaBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
padding: 15px 30px;
cursor: pointer;
font-size: 12px;
}
#layoutBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
font-size: 12px;
padding: 15px 20px;
cursor: pointer;
}
My html:
<div align="center">
<img src="yalda.jpg" class= "mainPic">
</div>
<div align="center">
<button class="button" id="layoutBtn">Layouts</button>
<button class="button" id="javaBtn">Java</button>
</div>
<div align="left">
<img src="me.jpg" class= "myPic">
<p><font color="white"> <i>some text</i></font></p>
<a href="&" target="_blank" class="fa fa-linkedin" ></a>
<button class="googleBtn">some text</button>
</div>
I am trying to create another button with a different css design but my third button inherits the css design from the first two and looks kinda like them. What can I do about it?
The third button looks like your first two buttons because you did not create a style that is specific to it. Your first rule applies to all of the buttons on the page:
button {
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
Unlike your second two rules, here you wrote button and not .button. This means that it will select all elements of type button, not all elements that have class="button".
Additionally, if you want your third button (I am assuming that this is the one with class="googleBtn") to look very different, then you must create a style rule that selects it, like so:
.googleBtn {
color: red;
/* replace this with your style rules */
}
Side note: the HTML align attribute, and the <font> element have been deprecated for years. Please do not use this to format your page.
First, you have to declare a CSS rule for .googleBtn with different styles in the rule. Also I noticed that the two rules in your CSS, #layoutBtn and #javaBtn, styles are exactly the same. Instead, you can define one rule for both #layoutBtn and #javaBtn with that style of button and another for .googleBtn.
See here: http://jsfiddle.net/zemar
(Must use Firefox or Opera to see)
When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the suggestions that appear aren't styled and therefore it doesn't match the rest of the styling.
Is it possible to style the drop-down?
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;}
<div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option value="4">Four</option>
</select>
</div>
<div class="input">
<input type="text" id="query" list="ingredients" placeholder="lamb"></input>
<datalist id="ingredients">
<option value="lamb">
<option value="beef">
<option value="chicken">
<option value="fish">
<option value="vegetarian">
</datalist>
</div>
Styling datalist with CSS only is not possible across browsers.
Internet Explorer, Firefox, Chrome and Edge apply basic styling to the input[list] element, but neither to datalist, nor to its option child elements.
See CodePen example.
Citing from MDN “Styling HTML forms – the ugly”:
Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select>, <option>, <optgroup> and <datalist> elements.
A very common way to circumvent this UI limitation is to provide a JavaScript based widget, that falls back to the HTML5 input+datalist combination for users which have JS disabled.
From the best of my knowledge you cannot style the <datalist> tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script
Note: you can get better performance by including this at the end of the document and using $(document).ready();
For example:
HTML:
<input type='text' id='input'>
Javascript:
$(document).ready(function() {
var arrayOfOptions = [
"Option 1",
"Option 2",
"etc"
];
$("#input").autocomplete({source: arrayOfOptions});
});
note: not tested code!
Source: http://jqueryui.com/autocomplete/
You can style this similarly to how you style a nav. Here are some classes you can style:
.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
height: 250px;
}