I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:
<div class="ui inverted pink vertical footer segment">
<div class="ui center aligned container">
<h4 class="ui inverted header">© Copyright 2017 | All rights reserved | Blahhh</h4>
<i class="facebook square icon big"></i>
<i class="twitter square icon big"></i>
<i class="linkedin square icon big"></i>
</div>
</div>
Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?
Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?
Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.
If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.
Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.
Related
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.
I can't offset the jump point for anchor tags in my React app. No matter how much I adjust paddings, margins, and top; I get the same result. The last thing I tried is react-router-hash-link-offset and it behaves the exact same way with the exception of the scroll.
<li className="app-link"><Link to="#section1" smooth scrollOffset="100">Summary</Link></li>
<div className="app-section" id="section1">
<h3>Summary</h3>
</div>
I'm opened to any suggestions at this point.
Use this library to implement this feature.
react-router-hash-link
Live demo
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I'm new to Drupal theming and am attempting to create a custom theme template for a specific content type I have.
I am attempting the following:
<div<?php print $content_attributes; ?>>
<?php print render($content['field_property_media']); ?>
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
<?php print render($content['address']); ?>
</div>
</div>
However, when the content actually render the address portion gets booted out of its parent div and looks like this:
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
</div>
<div class="field field-name-field-property-address field-type-addressfield field-label-inline clearfix"><div class="field-label">Address: </div><div class="field-items"><div class="field-item even"><div class="street-block"><div class="thoroughfare">55 Duchess Ave</div></div><div class="addressfield-container-inline locality-block"><span class="locality">London</span> <span class="state">Ontario</span> <span class="postal-code">N6C 1N3</span></div><span class="country">Canada</span></div></div></div>
I can't figure out why this is happening or what the solution is to keep the address within the div I manually created.
Thoughts?
The only possible way this could happen is if you've got a custom or contributed module intercepting your template file and changing it, or if you have some javascript enabled that's moving the <div> out of it's container. Drupal does absolutely no re-ordering of content when it processes a template file so it can't be anything in Drupal core that's causing the problem.
If the <div> is just displaying outside the container (i.e. it's inside when you inspect the source code) then you're probably just facing a floating issue; just add the clearfix class to the containing element.
EDIT
Just a thought, have you cleared your cache since you added the template file? If not, do that, it won't be picked up until the caches are cleared.
Also if this is a custom node template (i.e. node--page.tpl.php), make sure you've also copied node.tpl.php to your theme's folder. Then clear your cache again.