Can anyone tell me what is happening on this site
I have a span tag within an h1 tag to change the color of the & in the title. Span is an inline element, I don't get it. I have tried changing the h1 to a div tag or a p tag, the span resolutely makes a line break. What am I missing? I'm totally stumped here....
Add the following CSS rule to your stylesheet:
.site-header h1 span:after {
display: inline;
}
span is an inline element, but its default behavior is being overridden by the following CSS rule that begins on line 54 of your stylesheet:
.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.footer-widgets:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
:after, // This line gets overridden with the more specific selector provided above
.wrap:after {
clear: both;
content: " ";
display: table;
}
Related
Trying to render some buttons dynamically, cant get the styling to work.
I have my btnList -
const btnList= [
"FirsBtn",
"SecondBtn",
"ThirdBtn",
"ForthBtn",
"FifthBtn",
"SixthBtn",
];
I have my map function -
const RenderBtns = (btnList) => {
return btnList.map((btn) => {
return (
<button className={`classes.${btn}`} name={btn} onClick={onClickHandler}>{btn}</button>
);
});
};
And, I have my btn.module.css, with
.FirstBtn {background-color: #662626;}
.SecondBtn {background-color: #b0bf76;}
.ThirdBtn {background-color: #6b8327;}
.ForthBtn {background-color: #6a5938;}
.FifthBtn {background-color: #b0bf76;}
.SixthBtn {background-color: #1fa593;}
The styling, doesn't work.
This - className={classes.FirstBtn} works.
This - className={`${classes.SecondBtn}`} works.
This - className={`${classes}.${btn}`} Doesn't.
The buttons themselves, the clicks, everything else - works.
I went through all of the combinations, and I can't seem to get it to work.
Even though I get the main idea behind literal, and object,
at this point I'm just beat-up.
I want to get the className to accept the dynamic "btn"
any way to make it happen?
Help, Please, and thank you.
Almost gave up on google, and than I stumbled upon this
Answer
It was actually the second one that worked for me,
but n one the less - it worked.
className={classes[`${item}Btn`]}
I am building a mobile app using Ionic 2 and one of the requirements I have is to display 4 cards in one row if displayed in tablet and only 2 cards in a row if displayed in a mobile. I was wondering what would be the best way to achieve this?
You could essentially just give them a width with a min-width and let them reposition themselves. Something like
.card {
width: calc(100%/4);
min-width: calc(356px/2); // most minimum width of your container on a phone.
}
Probably your best bet though would be to go the responsive route. Just use a #media screen and (max-width="768px") or whatever you need to set it at and change the values there.
.card {
width: calc(100%/4);
}
#media screen and (max-width:768px){
.card {
width: calc(100%/2);
}
}
and you could do this with an *ngStyle if you wished to apply it via angular. Just create a string to match the value with and run an *ngIf statement to apply the separate values.
I have not tried this but you probably want to use ionic platform somewhere you could try something like on the <ion-col> element you can add [attr.width-50] for the iphone and [attr.width-25] for the ipad.
<ion-col [attr.width-50]="isIphoneOrIpad" [attr.width-25]="!isIphoneOrIpad">
You can then write the logic for the return boolean in the corresponding .ts file using Platform.
import { Platform } from 'ionic-angular';
#Component({...})
export MyPage {
isIphoneOrIpad:boolean;
constructor(public platform: Platform) {
this.isIphoneOrIpad = this.platform.is('iphone') || this.platform.is('ipad');
}
}
Which will return true or false and then display the attribute accordingly.
For more information check out the Ionic 2 Platform Documentation
I want to wrap h2 tags around a 'content type' text field (the field "product_title"), as a default setting, that the user cannot change.
I have tried to add this snippet in the file template.php in my theme:
function mytheme_preprocess_field(&$vars) {
if($vars['element']['#field_name'] == 'field_produktnamn'){
$vars['items']['0']['#markup'] = '<h2>This works</h2>';
}
}
But I can't figure out how to keep the original field content. I only want to add h2 tags, not replace the text content.
Or maybe I should go about this another way?
try using this instead:
$vars['items']['0']['#prefix'] = '<h2>';
$vars['items']['0']['#suffix'] = '</h2>';
I have a web page with below HTML format. This is just a sample and a part of code.
<div id="content">
........... Many other tags go in here......
<div id="1234"> // This id number is not constant and so cant hard code in xpath
<img class="float-right ng-scope" width="85" data-ng-click="highlightItem()" data-ng if="showThumbnail" ng-src="/server/image" src="/server/image">
<p>
<span data-ng-transclude="" data-ng-class="{ selected: isActive }">
<span class="ng-scope">My sample text</span>
<br class="ng-scope">
</span>
</p>
</div>
</div>
I have the text "My sample text" as my input. (There are many such div blocks and each has different span text). With this, I need to find the img element and click on it. I tried the below code : (referenceText variable = "My sample text")
String xPath = "//div[#id='content']//span[contains(text(),'" + referenceText + "')]";
// Get element of the text i.e get span element
WebElement element = getWebElementByXpath(getWebDriver(), xPath); // Gets span element
// Works fine !
// Get its parent element which is again another span
WebElement parentElement = getParentElement(element, xPath); // Gets next level span
// Works fine !
// Get its parent element p
WebElement grandParentElement = getParentElement(parentElement, xPath);
// Does not get its parent element 'p' instead return span element again
// Get preceding element for p which is img element
grandParentElement.findElement(By.xpath("./preceding-sibling::img")).click();
// Does not work as element p is not obtained.
getParentElement method is as below:
public static WebElement getParentElement(WebElement element, String xPath){
return element.findElement(By.xpath((xPath + "/..")));
}
Problem : I am able to get the span element and its parent span element but unable to get the p element and its sibling element img. I want to get img element using the span element. Any help on this would be great ! Thanks in advance.
Try the below XPAth for the image tag having "My sample text" as span value.
//div[#id='content']//div[.//span[span='My sample text']]/img
Refer http://www.xpathtester.com/xpath/b1d50008dd4be8ab7545548c4b8238f5
Simple open browser and check unique css locator, then check if that locator works for U in java code.
Try this xpath for getting grandparent 'p' from the 'span', with text "My sample text":
//span[.='My sample text']/../..
Try this xpath for getting the sibling 'img' of grandparent 'p', from the 'span' with text "My sample text":
//span[.='My sample text']/../../preceding-sibling::img
Try out with:
//span[.='My sample text']/ancestor::div/img
Thanks all for your help ! The below Xpath worked fine for me.
String xPath = "//div/p/span/span[contains(text(),'My Sample Text')]/../../..//img"
Iḿ trying to add more "columns" to a text area.
I have a form with
$f->addField('text','field');
$f->getElement('field')->setAttr('rows','8');
If I set 'rows' property I can add more rows to my textarea, but if i set the 'cols' property It doesn't display correct.
If I inspect the generated html, the textarea has correct set the property 'cols' but it doesn't expand it
Anyone as some help ?
thanks
The short answer is that CSS is affecting the textarea as #scrappedcola pointed out, but I'll give a bit more info on the matter.
Why is it 100%?
All the form fields take 100% of the width. If you need form to be more compact, you can place it into a grid column, which will limit it's width. You can also use horizontal form to conserve space or make it flow in multiple columns. Here is a demo: http://agiletoolkit.org/codepad/gui/formstyle
Where is it set?
If you open inspector for the textarea, you can find what the CSS properties are assigned to the textarea:
By clicking on the arrow under StyleRules (this is safari, but firefox's firebug addon is similar), you can see the following rules in atk-main.css file:
.atk-form fieldset .atk-form-row > .atk-form-field
input[type=text]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
input[type=password]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
textarea:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field select {
width: 100%;
}
The atk-main.css is generated from atk-main.less file:
fieldset .atk-form-row {
.clearafter();
margin-top:#margin/2;
&:first-child {margin-top:0;}
&.has-error>label {color:#error;}
&.has-error input {border-color:#error;}
>label {font-weight:bold;width:#label;margin-top:0.4em;float:left;}
>.atk-form-field {
margin-left:#label+#labelMargin;
input[type=text]:not([class*="span"]),
input[type=password]:not([class*="span"]),
textarea:not([class*="span"]),
select {width:100%;}
select {width:100%;margin-top:0.5em;}
textarea {display:block;margin-bottom:#margin/5;}
input+input {margin-left:0.4em;}
.atk-form-error {margin:#margin/5 0 0;color:#error;}
}
}
How to override?
You can create a local CSS file to set the width of YOUR textarea fields differently.
$this->api->jui->addStaticStylesheet('yourfile');
You can also set it manually:
$f->addField('text','field');
$f->getElement('field')->setAttr('style','width: 50%');