I got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.
Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).
I tried:
<north border="none">
<hbox width="100%">
<menubar id="menubar" width="380px">
<menu label="A">
<menupopup>
<menuitem label="A1"/>
</menupopup>
</menu>
....
</menubar>
<hbox vflex="1" hflex="1" align="center">
<div hflex="1"></div>
<label id="B"/>
<button id="C" label="C" />
<button id="D" label="D" />
<label id="E"/>
</hbox>
</hbox>
</north>
which looks fine, but when I set a value for label "b" or "e", the design gets broken.
h**p://i.imgur.com/HnRnxmj.png
The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".
Thanks
Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.
This gives you something like that:
...
</menubar>
<hbox vflex="1" hflex="1" align="center" pack="end">
<label id="B"/>
...
As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.
Related
I wanted a small separator to appear between buttons in custom ribbon tab. But the <separator id="MySeparatorE1" /> always draws large vertical separator.
How can we get small separator as circled in picture to appear between the buttons ?
I want a small seperator between Sample1 and Sample2 of figure (In figure both are written sample though) !
</group>
<group id="customgroupF" label="EDIT SECTION">
<dropDown id="dropDownF1" label="Hello:" sizeString="B_300*300" getItemCount="GetItemCount1" getItemLabel="GetItemLabel1" onAction="onaction1" getSelectedItemIndex="ItemSelectedIndex1" />
<dropDown id="dropDownF2" label="Hi:" sizeString="C_300*300" getItemCount="GetItemCount2" getItemLabel="GetItemLabel2" onAction="onaction2" getSelectedItemIndex="ItemSelectedIndex2" />
<box id="box1" boxStyle="horizontal">
<button id="custombuttonF3" label="Sample1" screentip="Increase" onAction="Macro4" imageMso="UpArrow2" />
<button id="custombuttonF4" label="Sample2" screentip="Decrease" onAction="Macro4" imageMso="DownArrow2" />
</box>
<box id="box2" boxStyle="vertical">
<button id="custombuttonF1" label="Run1" showLabel="false" screentip="Edit1" onAction="Macro4" imageMso="MacroPlay" />
<button id="custombuttonF2" label="Run2" showLabel="false" screentip="Edit2" onAction="Macro4" imageMso="MacroPlay" />
</box>
</group>
By default, the Ribbon engine determines the positions of controls that you add to a group. If you want to define the layout of the controls with more precision, you can group the controls within one or more boxes. When you create a box, you specify its orientation (horizontal or vertical). A group can contain multiple boxes, and you can include vertical dividers between the boxes. The vertical dividers are created by using the separator control, which is used only for vertical boxes. For example:
<group id="CustomGroup2" label="Vertical Boxes"
insertBeforeMso="GroupClipboard">
<box id="box3" boxStyle="vertical">
<button id="buttonB1" label="Button1"/>
<button id="buttonB2" label="Button2"/>
</box>
<separator id="separator2"/>
<box id="box4" boxStyle="vertical">
<button id="buttonBA" label="ButtonA"/>
<button id="buttonBB" label="ButtonB"/>
<button id="buttonBC" label="ButtonC"/>
</box>
</group>
I have the following portion of html code in a web page
<div class="action">
<div class="double-button">
<button class="widget-button" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
</div>
After hovering over the first button the class name change and the code transform to
<div class="action">
<div class="double-button">
<button class="widget-button d-hover" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
</div>
After clicking over the first button a new div appear that contains people who like the post
<div class="action">
<div class="double-button">
<button class="widget-button d-hover" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
<div class="likes">
<a class="trigger-user" href="/USER1" name="USER1">USER1</a>
<a class="trigger-user" href="/USER2" name="USER2">USER2</a>
</div>
</div>
My objective is to select all those users using selenium and python3 so I tried the following code inspired from other stack overflow questions like link1 and link2
driver = webdriver.Chrome(executable_path='./chromedriver_83') #this works fine
driver.get("link_to_the_page") #also I get the link and all contents without problems
likes_button=driver.find_elements_by_xpath("//button[#class='widget-button']") # works fine too
print(likes_button[0].text) # This gives '2', it the right value
hover = ActionChains(driver).move_to_element(likes_button[0]) #select only the first element in the page for testing
hover.perform() # I think the hover does not work even if this is the right way
likes_button_hover=driver.find_elements_by_xpath("//button[#class='widget-button d-hover']") # now select the hovered button to be clicked, since I hovered only one button in the whole page the result shoud be one
print(len(likes_button_hover)) # this gives 0 while it should give 1
likes_button_hover[0].click() # this throw an error
I get the following error which means the button did not change the class ( the hover did not work)
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button class="widget-button" title="2 people liked this post">2</button> is not clickable at point (537, 17). Other element would receive the click: <span>...</span>
(Session info: chrome=83.0.4103.116)
I tried to get into the first button in many means using for example
driver.find_elements_by_css_selector("[title*='people liked this post']")
but in vain, I think the problem occurs in the hover but I can not see why, and of course I can not get the button and click it without hovering it first.
What Am I doing wrong?
I can see two solution here.
1: As button (One you need to click to see all users) is always there but only class is changing. So you can do a direct click without hovering on it.
likes_button=driver.find_elements_by_xpath("//button[contains(#title,'people liked this post')]") # Used contains as number of people liked might change
print(likes_button[0].text) # This gives '2', it the right value
likes_button[0].click() # If not working try javaScript : driver.execute_script("arguments[0].click();", likes_button[0])
2: If you really want to click only after hovering, i guess you might need to to pause method of Actionchain class. As java script might take some time to load. In your case it is trying to find button with class widget-button d-hover immediately after hovering the mouse.
likes_button=driver.find_elements_by_xpath("//button[#class='widget-button']")
print(likes_button[0].text)
ActionChains(driver).move_to_element(likes_button[0]).pause(1).perform()
likes_button_hover=driver.find_elements_by_xpath("//button[#class='widget-button d-hover']")
print(len(likes_button_hover))
likes_button_hover[0].click()
I have HTML I want to give border-bottom property to the <Label> element which is a child of <StackLayout>.
My problem is the border-bottom is taking full width like a div in the web. I want this Label element to be inline like a span so that it's width should not be more than its content width.
<StackLayout *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
</StackLayout>
Below is the layout I'm getting now. But I don't want that orange line to be end to end. Instead its width should always be equal to the text present inside that Label.
Instead of StackLayout, you can have FlexboxLayout with the justifyContent="center".
<FlexboxLayout justifyContent="center" *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-
5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All
Activities"> .
</Label>
</FlexboxLayout>
Try setting horizontalAlignment on Label to center
<Label horizontalAlignment="center" ...
Add horizontalAlignment="center" to the label. This will center the component, making it only the size it needs to have.
Example playground: https://play.nativescript.org/?template=play-vue&id=8kZUFY
I have defined my dialog view as follows. For some reason it gives blank dialog box. If I uncomment the already commented control and comment the entire , then it works fine. I do not understand what is possible problem with the . Same code works for another dialog with the
View.xml
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id="editCompanyDialog" contentWidth="800px" contentHeight="100%" afterClose="onCancelEditCompanyDialog"
busy="{sharedApp>/oBusy/busy}" busyIndicatorDelay="{sharedApp/oBusy/delay}">
<!--<Toolbar class="modal-header">-->
<!-- <Text text="Edit Company Information" class="modal-title"/>-->
<!-- <core:Icon class="modal-logo" src="sap-icon://edit-icon"/>-->
<!-- <Button text="x" class="btn-link modal-close-button" press="onCancelEditCompanyDialog"/>-->
<!--</Toolbar>-->
<subHeader>
<Toolbar>
<Text class="sapUiSmallMarginBegin dialogTitle" text="{/headerText}"/>
<ToolbarSpacer></ToolbarSpacer>
<Button class="btn-link-grey" custdata:name="maDialog" icon="sap-icon://decline" tooltip="{i18n>GB_Close}" press="onCloseDialog"/>
</Toolbar>
</subHeader>
<Panel>
<content>
<l:BlockLayout id="editCompanyBlockLayout">
<l:BlockLayoutRow>
<l:BlockLayoutCell>
<VBox>
<ObjectIdentifier text="Edit your company information"/>
</VBox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
<l:BlockLayoutRow>
<l:BlockLayoutCell>
<VBox>
<Label text="{i18n>CC_Company}" labelFor="Name1"/>
<Input id="Name1" textAlign="Left" value="{EditCompany>/Input/Name1}" fieldGroupIds="FC"/>
</VBox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
</content>
</Panel>
In your button, you're using the custom data namespace, but haven't declared it.
Add
xmlns:custdata="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
to the top of your view in the core:FragmentDefinition tag
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>