Am using manage display to display nodes
The divs show no default classes as in the case below
<div>
<div>Pricing</div>
<div content="25000">25,000</div>
</div>
How do I resolve this?
I have not tried anything yet.
Related
When just visiting my main webpage, the tooltip when hovering over the countries in my react-simple-maps map looks pretty normal:
tooltip
However, after going to a different webpage, and then promptly returning to the map-containing webpage (same URL), the tooltip's padding changes:
changed tooltip
Here is the code behind my tooltip:
<ReactTooltip>
<div className="bg-gray-800 text-white rounded p-[8px]">
<div className="text-[16px] font-bold">
{Name}
</div>
<div className="text-[14px]">
No information available right now
</div>
</div>
</ReactTooltip>
I assume the issue lies in server/client-side rendering, since the strange border (which I assume to be the p-[8px] only appears after re-entering the webpage). However, I am still inexperienced. Any ways to fix this?
Thanks!
I tried putting the className directly into , but that resulted in a clear background... Then I just tried moving different stylings around but nothing seemed to do the trick.
I am working on a Bootstrap based form and struggling to get things to position properly.
I am trying to create a form consisting of labels/prompts and textboxes. The problems that I have with my code are
the label column (col-3) is too wide and reducing it to col-2 is too narrow. But I would like to make it narrower than what it is now.
the textboxes in the textbox column (col-4) are the same length but it does not matter what their class is, they don't get any wider. I would like them all wider.
not sure if I need col-5
I want the controls vertically middle within the row. They look like they are aligned to the top.
I have tried different classes and controls and cannot get something to work. This code will be put in a ASP.Net MVC project which is what the #Html.TextBoxFor is for, but I don't think this is an issue.
<div class="container">
<div class="row" style="height:38px">
<div class="col-3">Label 1:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox1)</div>
<div class="col-5"></div>
</div>
<div class="row" style="height:38px">
<div class="col-3">Label 2:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox2)</div>
<div class="col-5"></div>
</div>
</div>
Bootstrap 4 actually has column management here: https://getbootstrap.com/docs/4.3/layout/grid/
Specifically, col-sm-,col-md-,col-lg tags should assist you in choosing one thats the proper size
i have a Angular 2 project that uses Routes and differents components. one of this components is a login page that don't show any sidebar or footer... So, i need to put ONLY on this page a background (that covers all the body).
I try to use :host {..} but don't work.
How can access to the body background property on this component?
This component is on the same level that app.component.
app.component.html has the and the login component renders here.
Can you help me?
Not sure why you are applying backgorund. If you just want to hide side bar and footer for your login page then you can simply hide them based on your active route using hidden attribute or ngIf directive. Here the refernece for ngIf
It really depends on your login.component.html if :host will work and you didn't show it. You can wrap your login.component.html in a div container and add a class to it for its background color. This one works for me.
<div class="my-container>
<!--your content --!>
</div>
Here's a plunkr for the demo
I have created a content type called CaseStudy and given it a field called HomepageLogo.
I want the logos to appear on the homepage. To do this I have added a Projection Widget into my AfterContent zone and onto to the homepage layer within widgets with a query to get me X amount of case studies to display.
Within my query I have the Raw layout selected with the wrapper container tag of "P" and class "logos".
What I am now needing is this wrapper to wrap everything
<div class="outer home-case-studies">
<div class="inner"> {logos in here}
</div>
</div>
When I put the above wrapper in Content-CaseStudy.HomepageSummary.cshtml I get the wrapper repeated many times over and there doesn't seem to be an alternate available to me "one level higher".
Any help would be greatly appreciated
Thanks
Anto
So, I have a header and a footer:
<div id='footer' class="ui bottom sidebar">
<div id='header' class='ui top sidebar'>
And, the JS:
$('#header').sidebar('show');
$('#footer').sidebar('show');
The problem is having two sidebars shown at the same time causes the first one to be readjusted. From what I see, Semantic uses margin to push elements on or off screen, presumably with some sort of CSS transition. By having the footer active, it seems to push the header off the screen. Making the header fixed didn't help the situation. How can I have two sidebars active at the same time with no conflicts?
Any suggestions?
By default, the Semantic UI Sidebar module is exclusive; in other words, only one can be open at a time. Semantic will hide other sidebars automatically when a new one is shown.
You can change this behavior by configuring your Sidebars like so:
$('.ui.sidebar').sidebar({
exclusive: false
});
$('.ui.sidebar').sidebar('show');
(Example jsFiddle)
This Javascript will cause both of your Sidebars to be set to non-exclusive, and then show them both. This functionality is noted in the Semantic UI docs for the Sidebar module:
http://semantic-ui.com/modules/sidebar.html#/settings