I've tried different ways in my custom style.css file to change the background color of the bootstrap text area without success.
<div class="col-6">
<label for="example_ta" class="form-label">example text</label>
<textarea class="form-control" name="example" id="example_ta" rows="5"></textarea>
</div>
I've tried:
#example_ta
textarea#exampleta
textarea.form-control
But haven't been able to get the color to change from white.
Thx
Related
I am working on a Cordova App. which has a in index.html.
In the iOS app the is translated to a UIPickerView.
Here is what select tag looks like in index.html
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
So when user taps the it opens a UIPickerView which looks like this.
I want to change the background color (say Green) of the UIPickerView. Is there a way to override the property in native Swift/Objective-C?
No, you can't do that from Xcode. You'd have to make a plugin to change the background color programmatically.
The last radio shows like this:
radio background
When selected the icon background goes away. I tried toggling every single background from dev tools to no avail. Removing the icon images from project folder fixed the background, but renders my checkboxes useless, as they can't be visually checked without the images, so it's no solution. How do I fix this annoying bug?
EDIT:
I will assume the downvotes are because I did not provide code.
Here:
<!-- html stuff -->
<label for="21">
<input id="21" type="radio" name="bbNumber" value="1" />
Percent(%)
</label>
<label for="22">
<input id="22" type="radio" name="bbNumber" value="2" />
Number
</label>
<label for="23">
<input id="23" type="radio" name="bbNumber" value="0" checked />
Disable
</label>
<!-- more html stuff -->
JS
$(function(){
//unrelated stuff
$('input[type="checkbox"], input[type="radio"]').checkboxradio();
//some more stuff
});
No custom CSS meddling with radio. The only CSS I have used is for jQ - Autocomplete.
jQuery v 3.3.1
jQ UI v 1.12.1
Black Tie theme from Themeroller > Gallery
After a lot of fiddling, I came up with this crude, but working solution. The background in question belonged to an auto-generated span element from jQ-UI. I spotted the correct background image, wrapped all the radios in a unique div and applied the following CSS rule:
#id span.ui-checkboxradio-icon {
background-image: url('/PATH/TO/BACKGROUND.PNG') !important;
}
I am making a facebook like login page. in it im using 2 inline text boxes just like facebook front page. things were going good but automatically the size of both the textbox increases at runtime. i don't know what had happened as i already told you that things were going good
<div class=" form-group form-inline">
<asp:TextBox ID="tbName" runat="server" ForeColor="Black" class="form-control" placeholder="First name"></asp:TextBox>
<asp:TextBox ID="tbSName" runat="server" ForeColor="Black" class="form-control" placeholder="Surname"></asp:TextBox>
<div class="form-group form-inline">
<asp:RequiredFieldValidator ID="rfvName" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid First Name" ForeColor="Red" Style="font-size: small" ControlToValidate="tbName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvSname" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid Surname" ForeColor="Red" Style="font-size: small; padding:60px;" ControlToValidate="tbSName"></asp:RequiredFieldValidator>
</div>
</div>
also i m using bootstrap to make it responsive and in small screens it's working well but not on large screens
see the image click here to see the image
Please help
your bootstrap css is applied later. when you run the page in browser initially the css is NOT applied but when the css is loaded the textbox sizes increases which is the correct style of the selected class in bootstrap css. Try using ur inspect element of browser and remove the class attribute, you will get back ur initially loaded textboxes style
Problem: I have developed a basic web site using GoDaddy's Website Builder V7. See it here --> oktoberfestvisits.com . It is not iPad aware or optimized in any way since I have very little control over HTML, etc that is generated. All the pages appear to display properly, however, I have two problems I do not understand.
When trying to scroll quickly, ie. swiping down or up, the page only scrolls about 5 or so lines at a time. Is there something in the page that controls or prevents smooth scrolling (Momentum Scrolling)? All other web sites and web pages scroll fine.
When in the middle of the page, touching on the black title bar at the top of the screen does not snap back to the top of the page. Like above, is there something that controls or prevents this? Like above, all other web sites and web pages work fine.
I can make some minor HTML additions if necessary, but I do not know what causes this. Is there something that needs to be on my pages so that the iPad scrolls smoothly?
.sc {
-webkit-overflow-scrolling: touch;
}
Add this css code to style sheet and then add "sc" class on the page which that scroll issue. Like if you put finger on <input /> field and quickly scroll, but it doesnt scroll then put sc class on input field or add to its parent element.
e.g.
<div class="sc">
<div class="form-group sc">
<input type="text" placeholder="First Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Last Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Email"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Property Units"/>
</div>
</div>
The whole page is in a div with position: absolute;. I think this causes the scrolling error on iOS.
It appears that iOS has laggy scroll when you use overflow: hidden or overflow-x: hidden. Try to avoid that.
I'm pretty new to JQuery Mobile (using v1.3.1) and I'm not sure what I'm doing wrong here. I have a field-contain div with a label and a text/search input in it. When I resize the window the following happens:
First the searchbox jumps onto a new line (I could live with that), but then when I resize it further, it eventually gets taller and covers the label (I obviously cannot live with that :P ).
Here's the code:
<div data-role="fieldcontain">
<label for="city-location">Location:</label>
<input type="search" name="location" id="CheckCityNameInput" value="" data-mini="true" data-inline="true" />
</div>
<input type="button" data-inline="true" data-icon="search" data-iconpos="left" value="Locate city" data-mini="true"/>
This happens with Chrome and Firefox (I didn't test other browsers). Any idea what I'm doing wrong here?
Also when I resize it to the max, a "line" appears between the text input and the button... any idea why?
Damn, it was a conflicting CSS rules on the labels. Good to know that a float:left rule on a label would have this effect though.
Thanks for your help Gajotres.