I'm using bootstrap and opa to display a textarea, and I don't manage to span my textarea over all the screen width.
I'm using the following simple code :
import stdlib.themes.bootstrap;
import stdlib.widgets.bootstrap;
WB = WBootstrap;
textInput = <textarea style="width=30%" rows=30> This is a text area </textarea>
text2Input = <textarea style="width=100%" rows=1> another textarea </textarea>
content = WB.Grid.row([{span:4, offset:none, content: text2Input}]) <+>
WB.Grid.row([{span:16, offset:none, content: textInput}])
Server.start(
Server.http,
[
{page: function() {content}, title: "test" }
]
)
I also try to use the following css :
textarea
{
border:1px solid #999999;
width:10%;
margin:5px 0;
padding:3px;
}
But it doesn't work either.
It seems that WBoostrap override all my change. The "width:100%" style doesn't appear in the xhtml generated by opa.
What is the correct way for doing that ?
Thanks
Well there are multiple problems in your code :
First, there is a typo : it is style="width:100%"
Second, Twitter Bootstrap 2.0 is now 12 columns width, so span16 has no meaning, you can write span12 at most (if you looked at http://bootstrap.opalang.org, it says up to 16 because it was written for BS <= 1.4)
Third, where did you write you CSS ? If it's directly in Opa (css = ...), it is indeed overwritten by Bootstrap CSS (since Opa CSS will be included before all other resources), so you will probably need to include an external CSS (you can have a look at https://github.com/Aqua-Ye/OpaChat)
Finally, WBootstrap.Grid does not really seem to be adapted to make 100% width elements.
Related
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.