I am including angular-bootstrap-toggle in my library for toggling. I am also setting the on and off values. But the labels are overflowing, and is overlapped by the toggle button - Image 1, and Image 2. I want to set my own style. According to the documentation online on angular-bootstrap-toggle, we can just add style attribute. I tried that, but am getting an error saying ': expected' as shown here:
<div>
<toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" style="ami"></toggle>
</div>
Style is defined in my index.html file under after including all the css files as:
<style>
.toggle.ami {
width: 80px;
}
.toggle.ami .toggle-handle{
width: 80px;
}
</style>
I would appreciate any suggestions to help me overcome this problem.
It should work if you change "style" to "class" in your HTML:
<div>
<toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" class="ami"></toggle>
</div>
You will also need to remove the . from your .toggle CSS selector because toggle isn't a class:
<style>
toggle.ami {
width: 80px;
}
toggle.ami .toggle-handle{
width: 80px;
}
</style>
Related
I have some accordions from PrimeReact which I use in my code. But there are pictures inside and I want to make them smaller. This is the current problem:
As you can see, the picture is way too big. I want to set the width to 100%.
Now I did this already before when I used Angular with PrimeNG (same library, just for Angular) and I managed to this in the css file like:
:host ::ng-deep .p-accordion-content img {
width: 100%;
}
This code did exactly what I wanted.
Now I need the same for React. But it is not working when I use:
:host .p-accordion-content img {
width: 100%;
}
This is the code I used to create the accordions. Maybe it will help:
createAccordions = () => {
const allFAQs = this.state.allFAQs;
let accordions = [];
for (const faq of allFAQs) {
const accordion = <AccordionTab key={faq.uuid} header={faq.question}><div dangerouslySetInnerHTML={{ __html: faq.answer }}></div></AccordionTab>;
accordions.push(accordion);
}
return accordions;
}
render() {
return (
<div>
<div className="p-grid">
<div className="p-col-3">
</div>
<div className="p-col-6">
<Accordion>
{this.createAccordions()}
</Accordion>
</div>
<div className="p-col-3">
</div>
</div>
</div>
)
}
Does anyone know what I did wrong? How can I style the picture inside the accordionTab?
Thanks for every help!
this is easy you just need to do some experiments with your image dimensions for example...
add height along with width(this is used in CSS with pure html similar can be used in your code also)
:host .p-accordion-content img {
width: 100%;
height: auto;
}
thankyou
The issue
https://streamable.com/e/9z6lev (the flickering in the video is caused by the overlay being reopened every time meal plan is selected)
It "feels" like during the initial overlay open it's not the focused element and as result is's children can be clicked through :sad:
Overlay Template
The logic for the overlay is quite simple, and allow to nest any type of content inside:
<template>
<div class='swipeableWrapper'
#click.stop.prevent // not original code, just attempt to fix the issue
#touch.stop.prevent> // not original code, just attempt to fix the issue
<slot />
</div>
</template>
.swipeableWrapper {
height: 100%;
left: 0;
min-height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
Items List Template
<template>
<div>
...
<ListProduct v-for='(product, index) in products'
...
:showProduct='showProduct'
:key='index' />
</div>
<template>
// List Item
<template>
<div class='listProduct'
...
#click='showProduct'>
...
</div>
</template>
Intended approaches:
The following logic added to the overlay template to prevent events from bubbling:
#click.stop.prevent
#touch.stop.prevent
Global logic that will listen to opened overlay and add the following CSS class to the body element, in order to allow click on the overlay items, but still not much luck
.overlayOpened {
& * {
pointer-events: none;
touch-action: none;
}
.swipeableWrapper {
&,
& * {
pointer-events: auto;
touch-action: auto;
}
}
}
I am a bit puzzled with this dark magic behaviour and will really appreciate your opinion on the origin of the behaviour and possible solutions :bow:
Try this
#click.self.prevent="function"
Edited:
For the list item and function as prop
:showProduct="() => showProduct(item/index)"
So I have this HTML code, it displays a twitter feed.. The only problem is, it flows off the page. I would like the feed to be 100% width and 600px height. I've fiddled with this for a while, and can make it work somewhat.. I think it needs to be one single code.
https://jsfiddle.net/33nw5jcd
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
appreplicaapp = 'twitter';
appreplicaapikey = 'aa869d1f61a088e04e6fe1a66fc07933e404f9bb';
</script>
<script src="//api.appreplica.com/js/1/arc.js"></script>
</div>
Try this:
CSS
#a {
height: 600px;
background-color: #fff;
width: 100%;
}
#a::after {
content: 'hello this is the last node';
}
HTML
<div id="a">
</div>
Note: Try keeping your script after the element with id a. It may be a issue where your script executes before your element is rendered.
am using the below less css to change different theme color
#lightRed: #fdd;
#lightGreen: #dfd;
#lightBlue: #ddf;
#defaultThemeColor:#lightBlue;
#header{
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
#menu{
background:#defaultThemeColor;
}
And html is as follows:
<div id="swatch">
<ul>
<li>theme1</li>
<li>theme2</li>
<li>theme3</li>
</ul>
</div>
when theme1 is clicked #lightRed theme should be loaded, for theme2 #lightBlue and for theme3 #lightGreen
Please let me know how should be my javascript/ jquery to change the theme color on click
you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with jQuery and modifyVars on a .click event might work:
$('.theme_option').click(function(event){
event.preventDefault();
less.modifyVars({
'#defaultThemeColor': $(this).attr('data-theme')
});
});
using the on-click event to change the background color
this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]
If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:
HTML:
<div id="swatch">
<ul>
<li><a class="red" href="">theme1</a></li>
<li><a class="green" href="">theme2</a></li>
<li><a class="blue" href="">theme3</a></li>
</ul>
</div>
JS:
$('.red').click(function(){
$(this).css('background-color',"red")
});
$('.green').click(function(){
$(this).css('background-color',"red")
});
$('.blue').click(function(){
$(this).css('background-color',"blue")
});
Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.
So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:
lesscss:
.theme-1 {
//Here goes your theme colors
}
.theme-2 {
//Here goes more theme colors and rules
}
#header {
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
And your html:
<div id="header" class="theme-1"/>
<button onclick="$('.theme-1').removeClass('theme-1').addClass('theme-2');" name="Change to theme 2"/>
<button onclick="$('.theme-2').removeClass('theme-2').addClass('theme-1');" name="Change to theme 1"/>
Hope it helps.
As prem suggested, it would be best to apply a class to each theme
CSS:
/* -- [ light blue theme (default) ] ---------- */
#header, #header.lightblue {
background: #ddf;
height: 80px;
margin-bottom: 20px;
width: 300px;
}
#menu, #menu.lightblue {
background: #ddf;
}
/* -- [ light red theme ] ---------- */
#header.lightred {
background: #fdd;
height: 95px;
margin-bottom: 10px;
width: 400px;
}
#menu.lightred {
background: #fdd;
}
/* -- [ light green theme ] ---------- */
#header.lightgreen {
background: #dfd;
height: 72px;
margin-bottom: 15px;
width: 290px;
}
#menu.lightgreen {
background: #dfd;
}
This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.
HTML:
<div id="swatch">
<ul>
<li><a class="theme_option" data-theme="red" href="#">theme1</a></li>
<li><a class="theme_option" data-theme="green" href="#">theme2</a></li>
<li><a class="theme_option" data-theme="blue" href="#">theme3</a></li>
</ul>
</div>
JavaScript (jQuery):
jQuery('a.theme_option').click(function(e){
e.preventDefault();
var theme_class = jQuery(this).attr('data-theme');
jQuery(body).attr('class', theme_class);
}
the variables in css is a draft now!
http://www.w3.org/TR/css-variables/
Create classes by each color
Store class into local storage
change it using javascript function
<!DOCTYPE html>
<html lang="en" class="theme_name_1">
<head>
<style>
.theme_name_1{
color: #FFFF;
}
.theme_name_2{
color: #000;
}
</style>
</head>
<body>
<button id="switch" onclick="changeTheme()">Switch</button>
<script>
/* Script Save theme local storage to first load */
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
function setTheme(theme_name) {
localStorage.setItem('theme', theme_name);
document.documentElement.className = theme_name;
}
/*Change theme button click */
function changeTheme() {
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
}
</script>
</body>
</html>
Can anyone please let me how to Enlarge textarea while using OnClick function or how to increase the rows on onClick?
regards
balkar
If you can set pixel or column sizes (instead of using the rows and cols attributes), you can use the :focus CSS pseudo-class:
HTML:
<textarea id="myarea"></textarea>
CSS:
textarea#myarea { width: 100px; height: 20px; }
textarea#myarea:focus { width: 500px; height: 200px; }
depending on the layout, it's sometimes attractive to give the focused textarea position: absolute so it floats above the other elements in its enlarged state.
If you wanna use onClick, add an onClick Handler via JavaScript:
<html>
<body onLoad="load();">
<textarea id="t1">foo</textarea>
<script>
function load(){
document.getElementById("t1").addEventListener("click",function(){
this.setAttribute("rows","50");
},false);
}
</script>
</body>
</html>