SRU/Details Page - Fit 100% Width of Container

[kpcollier]

I have a SRU update page (I've tried Details as well) with only 1 Text Area field included in it. This Text Area field is full width and height of the datapage, so it is the only thing showing. 

I am trying to deploy this datapage into a container on my webpage. However, I can't seem to get it to go full width of the container. When looking at it through devtools, you can see a rogue <div> that doesn't have a class or ID, and has a style set to display: table. If I get rid of this styling, or add width: 100% to it, the datapage goes full width of the container. The problem is that I can't figure out how to select it to change the CSS if it doesn't have an ID or Class. 

I've tried messing with the width of the Text Area field. I can't have a fixed px because it doesn't resize like the rest of the page. 100% and auto width don't do anything. 

This rogue <div> is also there when previewing the datapage, so it isn't from my webpage. 

Any ideas how I can make this datapage 100% width?

 

[futurist]

Hi @kpcollier,

I believe you can select that rogue div through the section inside it. The rogue div is a parent, and the section is its child, and you can call an element's parent using javascript using the parentElement property (https://www.w3schools.com/jsref/prop_node_parentelement.asp).

Clearly I don't have access to your webpage or DataPage so I'm just gonna relay on the screenshot you provided, so can you try this:

 

<script>

const child = document.querySelector("section[data-cb-name='cbTable']")
const parent = child.parentElement;

parent.style.width = "100%" 
//or if the width doesnt work, try: parent.style.display = "block"

</script>

 

I believe you should add this code to your webpage because that's where the rogue div is coming from, correct? Or if that also doesnt work, try adding the script on the footer of the DataPage instead and see if thatll make a difference

[kpcollier]

Thanks @futurist!

The rogue div is actually part of the datapage. If you view a Details or SRU datapage by itself, you'll still be able to find it. In fact, if you just have a SRU/Details form only, it is very difficult to get just that datapage to be 100% of the width of the page. Not sure why.

I have found something kindof similar to what you've done, I think, but with CSS only. 

#caspioform > div{
  display: block !important;
}

div#cke_EditRecordSummary {
  width: 100%!important;
}

So far, this is working. I am guessing I'm not having any issues because this is the only form datapage on my webpage. I'm going to give your solution a try also. 

I appreciate the help.

[kpcollier]

21 minutes ago, futurist said:

<script>

const child = document.querySelector("section[data-cb-name='cbTable']")
const parent = child.parentElement;

parent.style.width = "100%" 
//or if the width doesnt work, try: parent.style.display = "block"

</script>

This does work with making the datapage full width. However the text area field doesn't resize with it. Using this script along with 

div#cke_EditRecordSummary {
  width: 100%!important;
}

that CSS rule made a great combo that is working great. 

[kpcollier]

Just an update. I noticed that sometimes the script wouldn't run when the page loads, keeping the original width, even with a DataPageReady listener. I think it is due to having multiple datapages deployed on my webpage and it was running too early or late or something - not sure.

Anyways, this script has eliminated that issue for me. In case anyone is looking for a similar solution:

document.addEventListener('DataPageReady', function (event) {
  if (event.detail.appKey == 'Your_Datapage_Appkey') {
  //get the unique id for DOM element
  var elementID = event.detail.uniqueSuffix; 
  var object = document.getElementById('cbTable' + elementID) ;	
  var jsParent = object.parentElement;
    
  jsParent.style.width = "100%";
  }
  
});